Question

这是我的表格

<form id="formContact" name="formContact" method="post" action="#">
            <input id="name" name="name" type="text" value="Your name goes here..." />
            <input id="email" name="email" type="text" value="E-mail to reply..." />
            <textarea id="message" name="message" rows="" cols="">Your message goes here...</textarea>
            <input class="send" name="send" type="submit" value="Send" />
        </form>
    </div>
    <span class="clear"></span>
</div>
<script type="text/javascript" src="jquery.js"></script>

我有一个contact.js页面，但没有php表格，我如何验证这一点，所以当你按发送它发送到设置电子邮件地址？

这是我的联系方式.JS表格页面

$().ready(function(){
    //global vars
    var name = $("#name");
    var nameText = "Your name goes here...";
    var email = $("#email");
    var emailText = "E-mail to reply...";
    var message = $("#message");
    var messageText = "Your message goes here...";

    //Form validation
    $("#formContact").submit(function(){
        if(!validateName() | !validateEmail() | !validateMessage()){
            return false;
        }
    });

    //Functions
    function validateEmail(){
        var a = $("#email").val();
        var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
        if(filter.test(a)){
            $("#email").removeClass("error");
            return true;
        }
        else{
            $("#email").addClass("error");
            return false;
        }
    }
    function validateName(){
        if(name.val().length < 4){
            name.addClass("error");
            return false;
        }
        else{
            name.removeClass("error");
            return true;
        }
    }
    function validateMessage(){
        if(message.val().length < 4){
            message.addClass("error");
            return false;
        }
        else{
            message.removeClass("error");
            return true;
        }
    }

    //Some interaction with inputs & textarea
    //name
    name.focus(function(){
        if($(this).attr("value") == nameText) $(this).attr("value", "");
    });
    name.blur(function(){
        if($(this).attr("value") == "") $(this).attr("value", nameText);
    });
    //email
    email.focus(function(){
        if($(this).attr("value") == emailText) $(this).attr("value", "");
    });
    email.blur(function(){
        if($(this).attr("value") == "") $(this).attr("value", emailText);
    });
    //message
    message.focus(function(){
        if($(this).attr("value") == messageText) $(this).attr("value", "");
    });
    message.blur(function(){
        if($(this).attr("value") == "") $(this).attr("value", messageText);
    });
});

Answer 1

哦，小男孩！

为什么你在javascript上遇到这么多麻烦？ Javascript变得有趣！当你没有乐趣的时候，你正在做的事情就是错误的！

试试这个：

<form id="formContact" name="formContact" method="post" action="#">
    <input id="name" class="required" type="text" value="Your name goes here..." />
    <input id="email" class="required email" type="text" value="E-mail to reply..." />
    <textarea id="message" class="required" rows="" cols="">Your message goes here...</textarea>
    <input type="submit" value="Send" class="send" />
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>

注意：检查class属性，我还添加了jQuery Validation插件

如果您想使用自己的错误消息，请使用：

$("form").validate({ messages: { required: "We need your email address to contact you", email: "Your email address must be in the format of name@domain.com" } });

如果您想手动验证表单，只需致电valid()

if( $("form").valid() ) ...

<强>加

将此信息发布到您的信息页中，只需执行以下操作：

$("form").bind("submit", function () { // let's add a loading spinner $(".send").addClass("loading"); // let's send it $.ajax({ type: "POST", url: "myReceiveMessagePage.php", data: $("form").serialize(), success: function() { // everything went smooth... $(".send").addClass("done"); }, error: function() { // dang! alert("something went wrong..."); }, complete: function() { // let's remove the fancy loading spinner $(".send").removeClass("loading"); } }); });

这会将所有值发布到myReceiveMessagePage.php，您可以将该页面中的所有值都作为POST。

在此文件中，您使用电子邮件对象发送电子邮件。 你不能仅使用javascript发送电子邮件，你总是需要一种服务器语言，如PHP，ASP.NET，perl等。大量的例子用于在网上发送电子邮件。

Answer 2

浏览器不能只是“发送电子邮件”，您需要提交到将发送电子邮件的服务器端脚本，或者您可以要求浏览器使用To，Subject，打开用户的电子邮件程序，和身体使用mailto:链接设置。

This example显示了如何使用主题和正文的mailto:链接。

jquery联系表格麻烦

2 个答案: