Initialize jQuery validate() function on multiple dynamically added forms

Question

It is has been suggested that it is best to initialize a $('#form').validate({}) function on page load rather than on a click event: jquery.form/validate plugin only allow submit if input is changed

I'm wondering how to do this for multiple dynamically added forms without wrapping the $('#form').validate({}) function inside of a on('click', 'input[type="submit"]', function.

Take this code for example:

var id="some identifier for the specific form that is submitted";
`$('#form'+id).validate({})`

How does this unique identifier, id, which is required to distinguish each form get created in the first place?
And what if you don't know the id after the page is loaded because it has been created dynamically, e.g., by AJAX.

I have been doing this but this is is what's not recommended:

$(document.body).on('click', 'input[type="submit"]', function(){
  var id=this.id;
  $('#form'+id).validate({});
});

thoughts?

thanks, tim

@Sparky672 Yes, I'm making a commenting system. Each comment can be commented on but I don't know the comment_id for the next form until I insert the comment into the database and return its row id. I guess you are right though I could initialize validate() on the new form after my templating() function generates it. — tim peterson
– tim peterson, Commented Jun 11, 2012 at 20:07
The form does not exist at all when the page loads? If so, then instead of initializing the validate() on submit, I'd initialize it immediately after the form is created ($(#myNewform).validate({ options, etc. })) — Sparky
– Sparky, Commented Jun 11, 2012 at 20:07
Yes, you'd want it initialized before submitting it, not after/during. — Sparky
– Sparky, Commented Jun 11, 2012 at 20:08
The general reasoning is that i'm playing with fire in the call stack by initializing during submitting? Also, For the forms that exist on page load should I initialize each of them with this: $('form').each(function(){...$(this).validate()});? — tim peterson
– tim peterson, Commented Jun 11, 2012 at 20:10
Yes, if all validate() options/instances are the same for all the existing forms, I don't see why you couldn't initialize them all with an .each(function(){. — Sparky
– Sparky, Commented Jun 11, 2012 at 20:15

Community · Accepted Answer · 2017-05-23 12:17:01Z

4

If the form does not exist at all when the page loads, then instead of initializing the .validate() on submit, I'd initialize it immediately after the form is created...

// code that dynamically creates #myNewform, then initialize validate()

$('#myNewform').validate();

(validate() should not be inside a submit handler because the validation is not initialized until after the submit button is clicked. This leads to issues when the form fails validation and must be submitted a second time. The second submit then re-initializes the plugin on the form a second time. See here, here, and here for similar issues.)

For existing form on page...

$(document).ready(function(){
    $('#myform').validate();
});

or for multiple form's sharing same validation options...

$(document).ready(function(){
    ('.myform').each(function(){
        $(this).validate();
    });
});

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Jun 11, 2012 at 20:25

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

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

Comments

Joe · Accepted Answer · 2023-05-30 17:41:47Z

0

I would add a function to handle validation that you can call once your dynamically added form is inserted.

function initializeValidation(form) {
    $(form).validate({
      ...
    })
  }

Once your ajax is completed successfully you call this function.

$.ajax({
    success: function(response) {
        $('#form-container').append(response);
        initializeValidation($('#form-container').find('form').last());
    }
});

answered May 30, 2023 at 17:41

Joe

812 bronze badges

Collectives™ on Stack Overflow

Initialize jQuery validate() function on multiple dynamically added forms

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related