JQuery表单Validator插件& Ajax

Question

我在Ajax中使用这个JQuery表单Validator和一个新手。验证工作正常，但我的问题是，即使存在错误，它仍然会发送表单。

<form method="post" id="contactForm" onsubmit="return submitdata();">
    <p><input type="text" id="v_name" placeholder="Enter name here..." data-validation="required"></p>
    <p><input type="email" id="v_email" class="email" placeholder="Enter email here..." data-validation="email"></p>
    <p><textarea id="v_message" placeholder="Enter message here..." data-validation="required"></textarea></p>
    <input type="submit" value="Submit"/>
</form>
<p id="success"></p>

<script>
$.validate({
form : '#contactForm' // initiliaze form validation
});


function submitdata()
    {
     var name    = $("#v_name").val();
     var email   = $("#v_email").val();
     var message = $("#v_message").val();

         $.ajax({
          type: 'post',
          url: 'functions.php',
          data: {
           post_name    : name,
           post_email   : email,
           post_message : message
          },
          success: function (response) {
           $('#success').html("Thanks! I will get in touch with you soon.");
           $("#contactForm")[0].reset();
          }
     });    

        return false;

    }
</script>

Answer 1

请原谅我的简短：

• 删除onsubmit="return submitdata()"属性。相反，连接到验证API (参见下面)。
• $.validate({})方法有一个名为onSuccess的配置属性，它接受一个函数。要么将submitdata函数分配给这个属性，要么给它分配一个匿名函数并调用其中的submitdata()函数。

请看这把小提琴作为一个例子http://jsfiddle.net/uwx40zq7/#&togetherjs=F7NqwDLRmp。

有关jQuery窗体验证http://www.formvalidator.net/#configuration的配置选项，请参阅此链接。

你差一点就能弄好了。问题是，您在表单中添加了onSubmit属性，同时也用$.validate()验证了表单。他们没有联系在一起，因此无法了解对方。通过使用onSuccess配置的$.validate()属性，可以将提交函数连接到验证API中，并告诉它只在没有验证错误的情况下使用submitdata()函数。

如果需要更好的解释，请告诉我。