Load jQuery Plugin on dynamic created form

Question

To validate a form, I use a validation plugin. Example:

$ ( '# post-form').validator()

I would like to load the plugin on a form that is dynamically created via an Ajax return. What I try:

$ (document).on ('ready', '# post-command-detail').validator ();

But it does not work. How can I activate the validator on a form created 100% dynamically?

To know: # post-command-detail is the id of the concerned form.

@Justcode Yes by an Ajax call (the response from server return a complete form) — Raphael Mercier, Oct 09 '18 at 13:26

score 0 · Accepted Answer · answered Oct 09 '18 at 13:25

You can initialize the plugin inside the ajax callback, right after the new form creation:

$.ajax({
    ...
    success: (data: any): void => {
        if (data) {
            // Append new form
            $('body').append($('<form id="post-command-detail" />'));

            // Select the new form and init the plugin
            $('#post-command-detail').validator();
        }
    }
});

score 0 · Answer 2 · answered Oct 09 '18 at 13:26

You can do something like this, Just call validate after you render the html into element:

$(document).ready(function () {
   
    validateForm("#form");
    //once your ajax succeeded you can do something like this
    $('#dynamicForm').html('<form id="form1" method="post" action="#"> <label for="name">Name</label> <input type="text" name="name" id="name" /><button type="submit">Submit</button> </form>');
    validateForm("#form1");

});

function validateForm(form){
$(form).validate({
        rules: {
            "name": {
                required: true,
                minlength: 5
            },
           
        },
        messages: {
            "name": {
                required: "Please, enter a name"
            },
            
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>

<form id="form" method="post" action="#">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" />
   
    <button type="submit">Submit</button>
</form>


<div id="dynamicForm" >

</div>

Load jQuery Plugin on dynamic created form

2 Answers2