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({})`

1. How does this unique identifier, id, which is required to distinguish each form get created in the first place?
2. 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 remended:

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

thoughts?

thanks, tim

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({})`

1. How does this unique identifier, id, which is required to distinguish each form get created in the first place?
2. 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 remended:

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

thoughts?

thanks, tim

• javascript
• jquery
• jquery-validate
• jquery-forms-plugin

• @Sparky672 Yes, I'm making a menting system. Each ment can be mented on but I don't know the ment_id for the next form until I insert the ment 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 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 Commented Jun 11, 2012 at 20:07
• Yes, you'd want it initialized before submitting it, not after/during. – 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 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 Commented Jun 11, 2012 at 20:15

2 Answers 2

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

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 pleted successfully you call this function.

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