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

我一直在跟踪验证我正在修改的HTML5模板上的表单。以下是链接：

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

HTML

此字段必填。
此字段必填。
此字段必填。
此字段必填。
信息：
此字段必填。

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>

$（函数（）{
$（'.error'）.hide（）；
$（“.button”）。单击（函数（）{
//在此验证并处理表单
$（'.error'）.hide（）；
变量名称=$（“输入名称”）.val（）；
如果（名称==“”）{
$（“label#name_error”）.show（）；
$（“输入#名称”）.focus（）；
返回false；
}
var email=$（“输入电子邮件”）.val（）；
如果（电子邮件==“”）{
$（“label#email_error”）.show（）；
$（“输入电子邮件”）.focus（）；
返回false；
}
var phone=$（“输入电话”）.val（）；
如果（电话==“”）{
$（“标签#电话错误”）.show（）；
$（“输入电话”）.focus（）；
返回false；
}
var subject=$（“输入对象”）.val（）；
如果（主题==“”）{
$（“标签#主题错误”）.show（）；
$（“输入对象”）.focus（）；
返回false；
}
var message=$（“输入消息”）.val（）；
如果（消息==“”）{
$（“label#message_error”）.show（）；
$（“输入消息”）.focus（）；
返回false；
}
var dataString='name='+name+'&email='+email+'&phone='+phone+'&subject='+subject+'&message='+message；
//警报（数据字符串）；返回false；
$.ajax({
类型：“POST”，
url:“联系post.html”，
数据：dataString，
成功：函数（）{
$（“#联系方式”）.html（“”）；
$（'#message'）.html（“已提交联系人表单！”）
.append（“我们将很快联系。
”）
.hide（）
.fadeIn（1500，函数（）{
$（“#消息”）。追加（“”）；
}); 
}
});
返回false；
});
});

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

您可以尝试将“return true；”添加到。单击

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

---

你有没有想过把这些东西结合起来：

$('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调用都会立即启动。它需要在以下范围内：

$（“.button”）。单击（函数（）{ }

函数，它应该有一个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:

$（函数（）{
$（'.error'）.hide（）；
$（“#联系方式”）。提交（功能（事件）{
警报（“已提交”）；
event.preventDefault（）；
//在此验证并处理表单
$（'.error'）.hide（）；
变量名称=$（“输入名称”）.val（）；
var email=$（“输入电子邮件”）.val（）；
var phone=$（“输入电话”）.val（）；
var subject=$（“输入对象”）.val（）；
var message=$（“#message”）.val（）；
如果（名称==“”）{
$（“label#name_error”）.show（）；
$（“输入#名称”）.focus（）；
}如果出现其他情况（电子邮件==“”）{
$（“label#email_error”）.show（）；
$（“输入电子邮件”）.focus（）；
}else if（电话==“”）{
$（“标签#电话错误”）.show（）；
$（“输入电话”）.focus（）；
}else if（主题==“”）{
$（“标签#主题错误”）.show（）；
$（“输入对象”）.focus（）；
}else if（消息==“”）{
$（“label#message_error”）.show（）；
$（“输入消息”）.focus（）；
}否则{
var dataString='name='+name+'&email='+email+'&phone='+phone+'&subject='+subject+'&message='+message；
$.ajax({
类型：“POST”，
url:“app/contact.php”，
数据：dataString，
成功：函数（）{
$（“#联系方式”）.html（“”）；
$（'#message'）.html（“已提交联系人表单！”）
.append（“我们将很快联系。
”）
.hide（）
.fadeIn（1500，函数（）{
$（“#消息”）。追加（“”）；
});
}
});  
}
});
});

我还将HTML中的所有值属性都更改为占位符属性，这样它们就可以按预期运行，不会妨碍验证

或者，由于您已经在使用jQuery，您可以签出一个jQuery插件，它将使这变得更简单

更新：

我从你的HTML中删除了所有的onfocus/onblur属性，它现在可以工作了。onblur标签中的JS用值填充表单，因此它能够通过验证。请看下面的verison

更新2:

var message=$（“input#message”）.val（）

应该是

var message=$（“#message”）.val（）

。 第一种是用“消息”的ID来查找输入，因为你有一个带有这个ID的文本。改变这一行将纠正你得到的空白消息。（参见上面更新的JS）

关于这个问题,

我注意到，在第一个链接中，我有$（“.button”）.submit（函数（事件），而在配置中，在同一个位置，你有$（“#联系人帖子”）.submit（函数（事件）

我没有

<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> 

<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>