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?

Anna Fohlmeister · Accepted Answer · 2017-03-20 15:03:05Z

2

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.

answered Mar 20, 2017 at 15:03

Anna Fohlmeister

4472 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Riffaz Starr Over a year ago

yes I am submitting the form inside the .each.. but I am not sure how to update the code as you say... when I tried to take the form submission it said 'checked' not defined.. can give a working example / updated code for mine please ?

vzkiss · Accepted Answer · 2017-03-20 15:32:15Z

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;
         }
      });
    });

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related