jQuery post data to server after successful validations

Question

Here is my jQuery snippet

  $("#saveBankDetails").click(function(){
           if($('#firstBankDetail').is(':visible')) {
               return validateFirstBankDetails();
            }     
           if($('#secondBankDetail').is(':visible')) {
               return validateSecondBankDetails();
            }   
           if($('#thirdBankDetail').is(':visible')) {
               return validateThirdBankDetails();
            }   
           if($('#fourthBankDetail').is(':visible')) {
               return validateFourthBankDetails();
            }   
       });

What i want to achieve is perform validation if the elements firstBankDetail , secondBankDetail and so on are visible. validateFirstBankDetails,validateSecondBankDetails are all javascript function.

I have used return to avoid posting data to server if validation fails. However it seems that data is posted if validateFirstBankDetails() returns true and thus the code does not move ahead . What modifications do i need to do so that code moves ahead and applys validations for secondBankDetail too ?

Your first valid return is ceasing execution of the following tests. Return at the end of all your tests instead. — Sam Carrington, Oct 04 '13 at 10:47
possible duplicate of [jQuery post data to server only if validation passes](http://stackoverflow.com/questions/19178874/jquery-post-data-to-server-only-if-validation-passes) — Sparky, Oct 04 '13 at 20:06

score 1 · Answer 1 · edited May 23 '17 at 10:25

Collect your result to the single variable:

$("#saveBankDetails").click(function(){
           var restult = true;
           if($('#firstBankDetail').is(':visible')) {
               result &= validateFirstBankDetails();
            }     
           if($('#secondBankDetail').is(':visible')) {
               result &= validateSecondBankDetails();
            }   
           if($('#thirdBankDetail').is(':visible')) {
               result &= validateThirdBankDetails();
            }   
           if($('#fourthBankDetail').is(':visible')) {
               result &= validateFourthBankDetails();
            }   

           return result;
       });

In this case if at least one validation fails - the whole form validation will fail.

P.S. Better to subscribe to form submit event and handle validation there: Prevent Default on Form Submit jQuery

does not work i get the result as zero and form is submitted. will have a look at prevent default on form — Abhishek Singh, Oct 04 '13 at 11:00
If you are getting result as '0' then your validation methods returns not only true/false. Check them. — Samich, Oct 04 '13 at 12:11

score 0 · Answer 2 · answered Oct 04 '13 at 10:46

0

if validation fails

return false

Add this to the end of the click event.

answered Oct 04 '13 at 10:46

Praveen

55,303
33
133
164

Amit · Answer 3 · 2013-10-04T11:30:57.677

0

You can also try this

$("#saveBankDetails").click(function(){
       var result = false;
       if($('#firstBankDetail').is(':visible')) {
           result = validateFirstBankDetails();
        }     
       if($('#secondBankDetail').is(':visible')) {
           result = validateSecondBankDetails();
        }   
       if($('#thirdBankDetail').is(':visible')) {
           result = validateThirdBankDetails();
        }   
       if($('#fourthBankDetail').is(':visible')) {
           result = validateFourthBankDetails();
        }
       return result;
   });

edited Oct 04 '13 at 11:30

answered Oct 04 '13 at 10:48

Amit

15,217
8
46
68

In your case if last validation will be success then all validation fill success. – Samich Oct 04 '13 at 10:51
result will be true if validation fails for all three and only for fourth it succeeds – Abhishek Singh Oct 04 '13 at 11:29

score 0 · Answer 4 · answered Oct 04 '13 at 10:49

Give those elements a class and then loop them:

$("#saveBankDetails").click(function(){
    var all_elements = $('.newClass');
    all_elements.each(function () {
        if (!$(this).is(':visible')) {
            //do something if not visible
            return false;
        }
    });
});

score 0 · Accepted Answer · answered Oct 04 '13 at 11:31

After following @Samich advice i came up with this solution. It works fine.

$('form').submit(function (event) {
           if($('#firstBankDetail').is(':visible')) {
               if(!validateFirstBankDetails()){
                   event.preventDefault();
               }
            }  
           if($('#secondBankDetail').is(':visible')) {
              if(!validateSecondBankDetails()){
               event.preventDefault();
              }
            }   
           if($('#thirdBankDetail').is(':visible')) {
               if(!validateThirdBankDetails()){
                   event.preventDefault();
               }
            }   
           if($('#fourthBankDetail').is(':visible')) {
               if(!validateFourthBankDetails()){
                   event.preventDefault();
               }
            }
       });

It is easier too

score -1 · Answer 6 · edited Oct 04 '13 at 10:53

 $("#saveBankDetails").click(function(){
       if($('#firstBankDetail').is(':visible')) {
           return validateFirstBankDetails();
        }     
       if($('#secondBankDetail').is(':visible')) {
           return validateSecondBankDetails();
        }   
       if($('#thirdBankDetail').is(':visible')) {
           return validateThirdBankDetails();
        }   
       if($('#fourthBankDetail').is(':visible')) {
           return validateFourthBankDetails();
        } 
       return false;

   });

If you dont want to return control back to server you can add return false;

Rahul Thakur · Answer 7 · 2013-10-04T11:05:14.197

$("#saveBankDetails").click(function(){
       var result = 0; var visible = 0;
       if($('#firstBankDetail').is(':visible')) {
           result = result + ( 1 & validateFirstBankDetails());
           visible++;
        }     
       if($('#secondBankDetail').is(':visible')) {
           result = result + ( 1 & validateFirstBankDetails());
           visible++;
        }   
       if($('#thirdBankDetail').is(':visible')) {
           result = result + ( 1 & validateFirstBankDetails());
           visible++;
        }   
       if($('#fourthBankDetail').is(':visible')) {
           result = result + ( 1 & validateFirstBankDetails());
           visible++;
        }   
       if(result == visible) {return true;}
       else{return false;}
   });

will not work because result will be 2 if only 2 of my divs are visible — Abhishek Singh, Oct 04 '13 at 11:02

jQuery post data to server after successful validations

7 Answers7

Linked