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

I am trying to submit a form using Ajax to a certain page and then get the message back. I am trying to validate the form using jqueryvalidation plug-in. I am using following code for submitting the form through Ajax.

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

Currently this code is directly posting the code without any validation.If there is any thing another you need to know please ask me. And if you know any other method for validating the form before submitting it through Ajax then please Help. here is html code of form

目前这段代码是直接发布代码而没有任何验证。如果有任何其他事情你需要知道请问我。如果您在通过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>

1 个解决方案

#1

Use $('#footercontact').valid() which return boolean.

使用$（'＃footercontact'）。valid（）返回布尔值。

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

  });
});