jQuery post data to server only if validation passes

Question

Here is my jQuery snippet.

 $("#saveBankDetails").click(function(){
           if($('#firstBankDetail').is(':visible')) {
                validateFirstBankDetails();
            }     
       });

So when i click on saveBankDetails if firstBankDetail is visible call the javascript function. validateFirstBankDetails() is a javascript function which returns false if validation fails.

Now i am redirected to another page even if validation fails. How can i stop that ?

What i want to achieve is submit form data only if validation passes i.e., validateFirstBankDetails() returns true. How can i do that ? I am a beginner to jQuery. Please Advice.

score 1 · Answer 1 · answered Oct 04 '13 at 10:26

1

Try with this

       $("#saveBankDetails").click(function(){
           if($('#firstBankDetail').is(':visible')) {
               return validateFirstBankDetails();
           }     
       });

answered Oct 04 '13 at 10:26

Ashis Kumar

6,494
2
21
36

Please have a look at my question http://stackoverflow.com/questions/19179316/jquery-post-data-to-server-after-successful-validations – Abhishek Singh Oct 04 '13 at 10:46

score 0 · Accepted Answer · answered Oct 04 '13 at 10:50

Reading your question, I understand that your button is the submit button of a form.

Well, then you could wire the "submit" event of the form, instead of the "click" event of the button, then use the very useful event.preventDefault() to avoid the redirection if validation was unsuccessful.

Something like this: (if there's only one form in your page, we can select it via jQuery as "form"):

$(document).ready(function() {
    $('form').submit(function (event) {
        if($('#firstBankDetail').is(':visible')) {
            if (validateFirstBankDetails() == false) {
                // won't submit
                event.preventDefault();
            } else {
                // will submit
            }
        } else {
            // won't submit
            event.preventDefault();
        }
    });    
});

I've tried it and it works. Hope this helps! Kind regards,

Ricardo.

jQuery post data to server only if validation passes

2 Answers2