jQuery表单验证器插件和Ajax

James 发表于 Dev

詹姆士

我在Ajax中使用此JQuery Form 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>

黑狼

请放纵我的简洁：

删除onsubmit="return submitdata()"属性。相反，请连接到Validation API（请参见下文）。
该$.validate({})方法具有称为的配置属性onSuccess，该属性接受一个函数。将submitdata函数分配给该属性，或者将其分配给匿名函数，然后submitdata()在其中调用该函数。

请参阅此小提琴以获得示例http://jsfiddle.net/uwx40zq7/#&togetherjs=F7NqwDLRmp。

请参阅此链接以获取jQuery Form Validation的配置选项http://www.formvalidator.net/#configuration。

您快要做好了。问题是您将onSubmit属性添加到了表单，并且同时还验证了表单$.validate()。他们没有连接在一起，所以彼此之间没有了解的方式。通过使用配置的onSuccess属性$.validate()，您可以将Submit函数挂接到验证API中，并告诉它仅在submitdata()没有验证错误的情况下才使用该函数。