CODEWITHSUNDEEP
ajaxjqueryjquery-plugins
black_belt
black_belt

Reputation: 6799

Jquery Post sending form values inspite of having validation errors

I am trying to insert my form values into database using Jquery AJjax and I have the following script to send data to my controller and it is working fine. I am using jquery validation plugin to validate my form. Now the problem is when I submit the form button and even though there is some validation errors (my validation plugin shows that) the form values are sent to database. But I want them to be sent only if there is no validation errors.

And after submitting the form the values still remains in the form.

Could you please tell me where I am doing wrong.

Just for you information I am using Codeigniter.

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

Upvotes: 0

Views: 267

Answers (2)

ceedubs
ceedubs

Reputation: 422

I'm not sure that I entirely understand how you want this to behave, but another approach is to use the submitHandler option, as described in the documentation:

Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it validated.

$(".selector").validate({
   submitHandler: function(form) {
     $(form).ajaxSubmit();
   }
})

As a head's up: I believe $(form).ajaxSubmit(); is using the jQuery form plugin. If you don't have that or don't want to use it, you can probably just put your current ajax submission there instead.

Side note:

The data argument for $.ajax can be an object literal, so you don't have to worry about adding in the question marks and ampersands yourself. You could do something like this:

data: {
    teacherid: $('#teacherid').val(),
    salary_amount: $('#salary_amount').val()
}

Upvotes: 1

David Hedlund
David Hedlund

Reputation: 129802

What's happening here is not that the form is being submitted, but that you're taking all the values from the form and posting them without submitting the form, and entirely without validating the values you're retreiving.

Your validation plugin probably has a function you can call manually to check if the form is valid, before you proceed to submit the AJAX post.

If you're using this plugin you might want to look at the functions valid()

if(!$('#my-form').valid())
    return false;

$.ajax({ ... });

... or form(). But there are heaps of validator plugins so I'm not sure this is what you're referring to. Regardless, what you want to do here is to manually trigger the validate before you submit the AJAX post.

Upvotes: 0

Related Questions