Question

I am trying to submit data using Jquery AJAX (using the following script) and it is working alright but the problem is it submits data even though there are some validation errors in my forms. I am using jQuery validation plug-in 1.7 to validate my forms.

So my question is there any way to prevent the AJAX post to send data if there is any validation error in my form?

Thanks 🙂

 <script  type="text/javascript">
  $(document).ready(function(){ // added
 $('#submit_item').click(function(){

   var teacherid = $('#teacherid').val();  
  var salary_amount = $('#salary_amount').val(); 



 $.ajax({

  type: "POST",
  url: "<?php echo base_url(); ?>addteacher_salary/add_ajax",
  data: "teacherid="+teacherid+ "&salary_amount="+ salary_amount,
  success: function(html){
  $("#show").html(html);


   }
 });

 return false
 });
 }); // added
 </script>

Answer 1

This works fine: (EDITED)

HTML:

<form action="index.html" id="myForm" method="post">
<span>Salary: </span>
<input type="text" id="salary_amount" class="required" />
<input type="submit" id="submit_item" Value="Submit" />
</form>

JS:

$(document).ready(function(){

  $("#submit_item").click(function(e){
    e.preventDefault();
     if($("#myForm").validate().form())
    {
        alert('DO AJAX POST');
    }
    else
    {
        alert('INVALID DATA');
    }
  });//submit--click
});//ready

Try it: http://jsfiddle.net/jlrvpuma/ksbpY/2/