在通过ajax提交之前使用jquery验证验证表单答案

【问题标题】：validate form using jquery validation before submitting through ajax在通过ajax提交之前使用jquery验证验证表单
【发布时间】：2016-06-07 10:24:22
【问题描述】：

我正在尝试使用 Ajax 将表单提交到某个页面，然后返回消息。我正在尝试使用 jqueryvalidation 插件验证表单。我正在使用以下代码通过 Ajax 提交表单。

<script type ="text/javascript">

jQuery(document).ready(function() {

  jQuery("#footercontact").submit(function(event) {
    form = $('#footercontact').serialize();
    $('#footercontact').validate();
    $.ajax({
      type: 'post',
      url: '<?php echo base_url();?>index.php/welcome/test',
      data: form,
      dataType: 'html',
      success: function(data) {
        $("#contactname").val('Name');
        $("#contactemail").val('Email');
        $("#contactmessage").val('Message');
        $("#contactsuccess").html(data);
      }
    });
    event.preventDefault();
  });
});

</script>

目前此代码是直接发布代码而没有任何验证。如果您有任何其他需要了解的内容，请咨询我。如果您知道在通过 Ajax 提交表单之前验证表单的任何其他方法，请提供帮助。这是表单的html代码

<form name="footercontact" id="footercontact" method="POST" action="">

  <input type="text" id="contactname" name="name" onblur="if(this.value=='')this.value='Name';" onfocus="if(this.value=='Name')this.value='';" value="Name" class="required">

  <input type="text" id="contactemail" name="email" onblur="if(this.value=='')this.value='Email';" onfocus="if(this.value=='Email')this.value='';" value="Email" class="required email">

  <textarea name="message" id="contactmessage" cols="" rows="" onblur="if(this.value=='')this.value='Message';" onfocus="if (this.value=='Message')this.value='';" value="Message" class="required"></textarea>

  <input name="submit" type="button" onclick="jsvalidate()" value="Submit" id="submitsave">

</form>

【问题讨论】：

您在哪里定义了验证规则？
实际上我正在使用 jquery 验证插件来验证表单。你可以在这里阅读：jqueryvalidation.org/validate 这仅在我不使用 Ajax 时才有效。但是将它与上面的代码一起使用只会发布数据。
你读过它的文档吗？您是否定义了验证规则？（在标记中还是在验证方法中？）

标签： jquery ajax forms validation

【解决方案1】：

使用$('#footercontact').valid() 哪个return boolean。

jQuery(document).ready(function() {
  jQuery("#footercontact").submit(function(event) {
    form = $(this).serialize();
    $(this).validate();
    if (!$(this).valid()) return false;
    $.ajax({
      type: 'post',
      url: '<?php echo base_url();?>index.php/welcome/test',
      data: form,
      dataType: 'html',
      success: function(data) {
        $("#contactname").val('Name');
        $("#contactemail").val('Email');
        $("#contactmessage").val('Message');
        $("#contactsuccess").html(data);
      }
    });
    event.preventDefault();

  });
});

【讨论】：