How to validate dynamically added fields and prevent form submission using jQuery?

Question

I have a form and it has reputive / dynamic fields.. I want to show a popup if the required fields are empty.

It works only for one student / section. When you go here : https://jsfiddle.net/riffaz/7nrabcos/ click on the 'pay now' button. You will see popups for empty fields and the form won't be submitted..

but when you add another student using + sign button and submit the form without filling the 2nd student or section it will show the popup for that too.. but after that it submits the form right away..

I have no idea why..

jQuery

jQuery('#payBtn').on('click', function(event) {
        event.preventDefault();
        event.stopPropagation();

        var formElement = jQuery(this).parents('form');
        formElement.find('input:required').each(function() {
            var minLength = 1;
            var value = jQuery(this).val();
            var checked = true;
            if (value.trim().length < minLength) {
                console.log('length is not ok');
                checked = false;
            }

            if (!checked) {
                console.log(jQuery(this).attr('name') + ' is not correctly filled!');
                var alertMsg = jQuery(this).attr('name') + ' is not correctly filled!';
                alert (alertMsg);
            } else {
                console.log('all is ok');
                formElement.submit();
                //jQuery('#myModal').modal('toggle');
            }
        });
    })

And it is in WordPress

seems this one works : https://jsfiddle.net/1xk9gtvo/ but not work that in WordpPress.. I do not see any console errors..

I am so confusing..

How can I get this works on the WordPress site and what is wrong with my code?

Answer 1

I haven't run your code, but what jumps out at me, is that you're submitting the form within the each loop. In other words: the first required and checked input will trigger the form submit. I am assuming that you're seeing the popup for the second checkbox, because the second iteration of the loop was completed before the response to your submitted request has reached the browser.

EDIT: Sorry, I forgot to actually provide you with a solution. After iterating through the loop, I would count the number of ('input:required').not(':checked').length and submit the form only if this number is zero.

Answer 2

The code you are looking for.

    jQuery('#payBtn').on('click', function(event){
      event.preventDefault();
      event.stopPropagation();

      var formElement = jQuery(this).parents('form');       

      formElement.find('input:required').each(function(){

         //check if current input element is checked and count empty fields
         var emptyFields = jQuery(this).not(':checked').filter(function() {
            return jQuery(this).val() === "";
         }).length;

         // call form submit only if emptyFields are zero
         if (emptyFields === 0) {
            formElement.submit();
         } else {
             console.log(jQuery(this).attr('name') + ' is not correctly filled!');
             return false;
         }
      });
    });