Question

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

Answer 1

请放纵我的简洁：

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

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

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

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

如果需要进一步说明，请告诉我。

jQuery表单验证器插件和Ajax

1 个答案: