jquery - 在通过ajax提交之前使用jquery验证来验证表单

Question

我正在尝试使用 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>

Answer 1

使用$('#footercontact').valid()，返回 bool 值。

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();

  });
});