Загрузить плагин jQuery в динамически созданной форме - PullRequest
Новая
       43

Загрузить плагин jQuery в динамически созданной форме

0 голосов
/ 09 октября 2018

Для проверки формы я использую плагин проверки.Пример: 

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

Я хотел бы загрузить плагин в форме, которая динамически создается с помощью возврата Ajax.Что я пытаюсь: 

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

Но это не работает.Как я могу активировать валидатор в форме, созданной на 100% динамически?

Чтобы знать: # post-command-detail - это идентификатор соответствующей формы.

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

Вы можете сделать что-то вроде этого, просто вызовите validate после рендеринга html в элемент: 

$(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>
0 голосов
/ 09 октября 2018

Вы можете инициализировать плагин внутри обратного вызова ajax сразу после создания новой формы: 

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