CODEWITHSUNDEEP
javascriptjqueryjquery-validate
Chaibi Alaa
Chaibi Alaa

Reputation: 1386

jQuery Validate with appended form element

I've read the four related answers on SO, and they form the main part of the dynamic validation I'm trying here.

I have a form with some dynamic actions like add and remove a block (div) which contains user studies or experiences. Each block contains few elements that I need to validate.

The validation to the appended element works only if you focus and then submit the form, before that, if you don't focus on element for exemple "study_5" and submit the form, it will get submitted with no problems (even if it has the required tag)

Here is my JS :

var multiple_formation_max_fields = 10;
            var multiple_formation_wrapper = $(".multiple-formation");
            var multiple_formation_add_button = $(".add_formation");

            var x = {{ Auth::user()->candidate and Auth::user()->candidate->certifications->count() > 0 ? Auth::user()->candidate->certifications->count() + 1 : 1}};
            $(multiple_formation_add_button).click(function (e) {
                e.preventDefault();
                if (x < multiple_formation_max_fields) {
                    x++;
                    $(multiple_formation_wrapper).append(
                        '<div class="sub-form">' +
                                                    // deleted unusfull code
                        '<div class="col-lg-6">' +
                        '<span class="pf-title">Établissement</span>' +
                        '<div class="pf-field">' +
                        '<input type="text" class="form-control" required id="formation_establishment_'+x+'" placeholder="ISET, Esprit, .. " name="formation_establishment[]">' +
                        // deleted unusfull code
                        '</div>' +
                        '</div>' +
                        '</div>'
                    );
                }
                $('.date').dateDropper();
                $(".chosen").chosen();
                $('#formation_establishment_'+x).rules('add', {
                    'required': true
                });
                $('#form').validate();

            });

and the result as if I click on submit without focusing on the second element appended to form : enter image description here

The first validated element works because it is mainly on page. The second one didn't. The third one works because I pressed submit while focusing in there.

Upvotes: 0

Views: 2114

Answers (1)

Sparky
Sparky

Reputation: 98738

Normal operation of the jQuery Validate plugin:

  1. Initialize plugin on your form on page load via the .validate() method. Do not initialize the form (do not call the .validate() method) within a click handler.

  2. Add rules to dynamically added form fields via the .rules() method.

You cannot do step 2 before step 1.

You are calling .validate() after .rules() and it's inside a click handler. The .validate() method is the initialization of the plugin on your form and should only be called once, and when the page is loaded.

You can never call the .rules() method before initializing the form with .validate().

So pull .validate() completely out of the click handler and only call it once within the document ready handler.

Upvotes: 1

Related Questions