javascript - 简单的形式跳过验证/发送并直接发送到 ajax 消息

Question

我一直在关注this tutorial验证我正在修改的 HTML5 模板上的表单。这是链接:http://englishpearls.net/dev/contact.html

如您所见，表单直接进入 ajax 消息并跳过其他所有内容。我做错了什么？

HTML

<div id="contact_form">
    <form method="post" action="contact-post.html" >
    <div class="to">
        <input id="name" for="name" type="text" class="text" value="Name" name="userName" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
        <label class="error" for="name" id="name_error">This field is required.</label>
        <input id="email" type="text" class="text" value="Email" name="userEmail" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" style="margin-left: 10px">
        <label for="email" class="error" for="email" id="email_error">This field is required.</label>
    </div>
    <div class="to">
        <input id="phone" for="phone" type="text" class="text" value="Phone" name="userPhone" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Phone';}">
        <label class="error" for="phone" id="phone_error">This field is required.</label>
        <input id="subject" type="text" class="text" value="Subject" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Subject';}" style="margin-left: 10px">
        <label class="error" for="subject" id="subject_error">This field is required.</label>
    </div>
    <div class="text">
        <textarea id="message" value="Message:" name="userMsg" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">Message:</textarea>
        <label class="error" for="message" id="message_error">This field is required.</label>
    </div>
    <div>
        <input class="button" type="submit" value="Submit" name="submit" />
    </div> 
</div>

Jquery 编辑:更新脚本<​​/p>

    <script type="text/javascript">

            $(function() {
  $('.error').hide();
  $(".button").click(function() {
    // validate and process form here

    $('.error').hide();
    var name = $("input#name").val();
      if (name == "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
    }
      var email = $("input#email").val();
      if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }
      var phone = $("input#phone").val();
      if (phone == "") {
      $("label#phone_error").show();
      $("input#phone").focus();
      return false;
    }
     var subject = $("input#subject").val();
      if (subject == "") {
      $("label#subject_error").show();
      $("input#subject").focus();
      return false;
    }
     var message = $("input#message").val();
      if (message == "") {
      $("label#message_error").show();
      $("input#message").focus();
      return false;
    }

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone + '&subject=' + subject + '&message=' + message;
//alert (dataString);return false;
$.ajax({
  type: "POST",
  url: "contact-post.html",
  data: dataString,
  success: function() {
    $('#contact_form').html("<div id='message'></div>");
    $('#message').html("<h2>Contact Form Submitted!</h2>")
    .append("<p>We will be in touch soon.</p>")
    .hide()
    .fadeIn(1500, function() {
      $('#message').append("<img id='checkmark' src='web/images/check.jpg' />");
    }); 
  }
});
return false; 

  });

});


</script>

如果没有验证脚本，电子邮件可以正常发送。谢谢!

Answer 1

按照您的脚本现在的设置方式，AJAX 调用将立即触发，无论任何输入如何。它需要位于此内部:

$(".button").click(function () { }

函数，它应该有一个 if 语句，仅当表单验证成功时才允许 AJAX 触发。

更新:

<div id="contact_form">
    <form id="contact-post" method="post" action="contact-post.html" >
    <div class="to">
        <input id="name" for="name" type="text" class="text" placeholder="Name" name="userName" >
        <label class="error" for="name" id="name_error">This field is required.</label>
        <input id="email" type="text" class="text" placeholder="Email" name="userEmail" style="margin-left: 10px">
        <label for="email" class="error" for="email" id="email_error">This field is required.</label>
    </div>
    <div class="to">
        <input id="phone" for="phone" type="text" class="text" placeholder="Phone" name="userPhone" >
        <label class="error" for="phone" id="phone_error">This field is required.</label>
        <input id="subject" type="text" class="text" placeholder="Subject"style="margin-left: 10px">
        <label class="error" for="subject" id="subject_error">This field is required.</label>
    </div>
    <div class="text">
        <textarea id="message" placeholder="Message:" name="userMsg">Message:</textarea>
        <label class="error" for="message" id="message_error">This field is required.</label>
    </div>
    <div>
        <input class="button" type="submit" value="Submit" name="submit" />
    </div> 

JS:

<script type = "text/javascript">

    $(function () {
        $('.error').hide();
        $("#contact-post").submit(function (event) {
            alert("submitted");
            event.preventDefault();
           // validate and process form here
            $('.error').hide();
            var name = $("input#name").val();
            var email = $("input#email").val();
            var phone = $("input#phone").val();
            var subject = $("input#subject").val();
            var message = $("#message").val();


            if (name == "") {
                $("label#name_error").show();
                $("input#name").focus();
            } else if (email == "") {
               $("label#email_error").show();
               $("input#email").focus();
            } else if (phone == "") {
                $("label#phone_error").show();
                $("input#phone").focus();
            } else if (subject == "") {
                $("label#subject_error").show();
                $("input#subject").focus();
            } else if (message == "") {
                $("label#message_error").show();
                $("input#message").focus();
            } else {
                var dataString = 'name=' + name + '&email=' + email + '&phone=' + phone + '&subject=' + subject + '&message=' + message;
                $.ajax({
                    type: "POST",
                    url: "app/contact.php",
                    data: dataString,
                    success: function () {
                        $('#contact_form').html("<div id='message'></div>");
                        $('#message').html("<h2>Contact Form Submitted!</h2>")
                        .append("<p>We will be in touch soon.</p>")
                        .hide()
                        .fadeIn(1500, function () {
                            $('#message').append("<img id='checkmark' src='web/images/check.jpg' />");
                        });
                    }
                });  
            }
       });
    });
< /script>

那会起作用的。此外，我将 HTML 中的所有值属性更改为占位符属性，以便它们按预期运行并且不会妨碍验证。

或者，由于您已经在使用 jQuery，您可以查看 jQuery Validate ，一个 jQuery 插件，可以让这件事变得更简单

更新:

我从 HTML 中删除了所有 onfocus/onblur 属性，现在它可以工作了。 onblur 标签中的 JS 正在用值填充表单，因此它能够通过验证。看看这个JSFIDDLE对于工作版本

更新2:

var message = $("input#message").val() 应为 var message = $("#message").val()。第一个是寻找 id 为“message”的输入，因为您有一个具有该 id 的文本区域。更改此行将更正您收到的空白消息。 (参见上面更新的JS)

关于这个问题，

I have noticed that in the first link I have the $(".button").submit(function (event) whereas in your config, in the same spot you have $("#contact-post").submit(function (event)

我在提交 id 为“contact-post”的表单时执行验证，而不是在提交按钮时执行验证(这是不可能的)。具有此 JS/表单的页面提交的原因是要验证的 JS 永远不会被触发。

可以(尽管不太可能)在不单击该按钮的情况下提交表单，因此我们不希望在偶然发生的情况下跳过验证。