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编辑：更新的脚本

    <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的 textarea 。更改此行将更正您收到的空白消息。（参见上面更新的JS）

关于这个问题，

我注意到在第一个链接中我有$（“。button”）。submit（function（event）而在你的配置中，在同一个地方你有$（“＃contact-post”）。（功能（事件）

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

有可能（尽管不太可能）在不点击该按钮的情况下提交表单，因此我们不希望在发生的偶然事件中跳过验证。

Answer 2

您可以尝试添加“return true;”到.click

$(".button").click(function () { 
   //...
   //validation code
   //...
   //return true if passes validation
  return true; 
}

Answer 3

您是否考虑过将这样的事情结合起来：

$('yourForm').on('submit', function(event){
    if ( formIsvalid() ) {
      $.ajax({
          ...
        });
    } else {
        // Do something else maybe?
    }
    event.preventDefault();
});

// Form validation.
function formIsvalid() {
  ... form validation here...
  return true;
}

简单表单跳过验证/发送和直接转到ajax消息

3 个答案: