CODEWITHSUNDEEP
jqueryajaxformsvalidation
prabhjot
prabhjot

Reputation: 394

validate form using jquery validation before submitting through ajax

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.

<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

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

Upvotes: 2

Views: 11075

Answers (1)

Parvez Rahaman
Parvez Rahaman

Reputation: 4387

Use $('#footercontact').valid() which 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();

  });
});

Upvotes: 3

Related Questions