CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Riffaz Starr
Riffaz Starr

Reputation: 611

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

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?

Upvotes: 0

Views: 187

Answers (2)

vzkiss
vzkiss

Reputation: 73

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

Upvotes: 0

Anna Fohlmeister
Anna Fohlmeister

Reputation: 447

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.

Upvotes: 2

Related Questions