Ненавязчивая проверка - добавленное правило работает только при наличии существующего поля

Я пытаюсь динамически добавить необходимое правило в список переключателей.

Приведенный ниже пример работает, хотя после удаления строки "Имя" проверка теперь выполняется дольше.

Похоже, на странице должно быть поле с атрибутами data-val, чтобы плагин валидации мог начать просмотр формы.

Как я могу добавить динамические правила на страницу без существующих ненавязчивых полей?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>

<div class="container body-content">
    <form action="" method="post">

        <!-- When below row is commented out validation no longer fires -->
        <div class="row">
            <div class="col-md-4">
                <p>Name</p>
            </div>
            <div class="col-md-4">
                <input class="input-validation-error" data-val="true" data-val-required="Name required" id="Name" name="Name" type="text" value=""/>
            </div>
            <div class="col-md-4">
                <span class="field-validation-error" data-valmsg-for="Name" data-valmsg-replace="true"></span>
            </div>
        </div>

        <div class="row dynamic_checkbox_container">
            <div class="col-md-4">
                <p>Dynamic Checkbox</p>
            </div>
            <div class="col-md-2">
                Yes
                <input id="CheckBox" name="CheckBox" type="radio" value="True"/>
            </div>
            <div class="col-md-2">
                No
                <input id="CheckBox" name="CheckBox" type="radio" value="False"/>
            </div>
            <div class="col-md-4">
                <span class="field-validation-valid" data-valmsg-for="CheckBox" data-valmsg-replace="true"></span>
            </div>
        </div>


        <input type="submit" value="Go" name="go"/>
    </form>
</div>

    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/5.2/jquery.validate.unobtrusive.js"></script>
<script>

    $(document).ready(function() {


        $(".dynamic_checkbox_container input").each(function() {

            $(this).rules("add", {
                required: true,
                messages: {
                    required: "This field is required."
                }
            });
        });
    });

</script>
</body>
</html>
Источник

0 ответов

Другие вопросы по тегам