Validating jQuery Multicast

Question

I am trying to test individual parts of a form separately. Unfortunately, the form is generated by CMS, so I am limited in its manipulations.

I tried to create an array of validate objects using the current section of the form as an index. I.e:

  //initialize validation validators = [ $('#donation_amount').validate({ rules:{ amount: { required: true } } }), $('#personal_information').validate({ rules:{ Street: { required: true } } }) ]; 

and moving through these sections:

  $('#btn-next').click(function() { //if validation is true, show next page if (validators[curOrder].valid()) { var old = $('.active'); var oldOrder = old.attr('data-order'); var newOrder = parseInt(oldOrder) + 1; old.removeClass('active'); $("[data-order='" + newOrder + "']").addClass('active'); curOrder = newOrder; }else{ console.log("invalid"); } }); 

However, validation always returns true .

Here is the page in question: https://salsa3.salsalabs.com/o/50388/p/salsa/donation/common/public/?donate_page_KEY=8461

Answer 1

Why do you even use the .validate plugin when you write a little javascript yourself. Press, just check the value of the inputs (for example, $ ('# myInput'). Val (). Trim () == "") and show / hide the corresponding div with each input.

In addition, for multi-parameter verification, check only the required fields and continue with what needs to be done.

 $('#btn-next').click(function() { var amountValid = $('#donation_amount').val().trim() == '' ? false : true; var infoValid = $('#personal_information').val().trim() == '' ? false : true; if (amountValid && infoValid) { var old = $('.active'); var oldOrder = old.attr('data-order'); var newOrder = parseInt(oldOrder) + 1; old.removeClass('active'); $("[data-order='" + newOrder + "']").addClass('active'); curOrder = newOrder; }else{ console.log("invalid"); } });