Нокаут + Jquery Validate

Я пытаюсь настроить валидацию с помощью проверки jquery, и у меня появилась модель просмотра, возвращаемая с сервера, сопоставленная с клиентом и успешно использующая нокауты js, привязывающие некоторые данные.

Я включил вызов для проверки, но проверка никогда не запускается, однако, если я помещаю класс в поле ввода, а затем вызываю его, то он запускается, как ожидалось.

Любые идеи?

<script type="text/javascript">
        var viewModel;
        $(document).ready(function () {
            $.ajax({
                url: 'Home/GetUserData',
                type: 'post',
                success: function (data) {
                    viewModel = ko.mapping.fromJS(data);
                    viewModel.save = function () { sendToServer(); };
                    ko.applyBindings(viewModel);
                    main();
                }
            });
        });

        function main() {
            $("form").validate({
                rules: {
                    birthPlace: {
                        required: true,
                        minlength: 2
                    }
                }
            });
        }

        function sendToServer() {
            alert($("form").valid());
        }

    </script>
}
<h2>@ViewBag.Message</h2>
<form id="nameSubmit" action="">
    <div>
        The name is: <span id="test" data-bind="text: Name"></span>
    </div>
    <div>
        He <span id="age" data-bind="text: Age"></span>
    </div>
    <div>
        He from
        <input type="text" id="birthPlace" name="birthPlace"/>
    </div>
    <div>
        <button data-bind="click: save">Click Me</button>
    </div>
</form>

ОТВЕТЫ

Ответ 1

По умолчанию jQuery Validate выполняет проверку на отправке. Поэтому, если нокаут прерывает это, т.е. Фактически не вызывает событие onSubmit, что бы это сделать. Лучше всего сделать то, что вы планировали в своей функции sendToServer, - вручную активируйте проверку с вашего события отправки нокаутом:

if (!$('form').valid()){
    $('form').showErrors();
    return false;
}

//otherwise, get on with whatever knockout needs to do
...
return true;

Ответ 3

Я бы хотел рекомендовать против использования проверки jQuery с нокаутом. Причина в том, что проверка jQuery привязывается к DOM, а нокаут рекомендует работать с моделью представления. Это приведет к проблемам, когда вы начнете добавлять больше зависимостей от проверки, например, предотвратите определенное поведение, если данные недействительны, но вам все равно необходимо сохранить данные. Пойдите для проверки нокаута, он делает работу очень хорошо.

Ответ 4

Я использовал параметр submitHandler для validate():

$("#myform").validate({
 submitHandler: function(form) {
   viewModel.sendToServer()
 }
});

В форме просто используйте стандартную <input type="submit">, а проверка jQuery заберет событие, проверит и, если valid будет вызывать ваш обработчик на viewModel.

Ответ 5

Правильно, что jQuery Validation выполняет свою проверку только на этапе отправки события (в соответствии с ответом Ryley). Поэтому, если вы используете стиль нокаута data-bind="click:modelSubmit", это предотвратит отправку формы при запуске (по умолчанию) и поэтому предотвратит выполнение jQuery Validation.

У вас есть два варианта. Первый заключается в возвращении true из modelSubmit(), который сделает нокаут огнем в форме submit (но только после завершения modelSubmit) (http://knockoutjs.com/documentation/click-binding.html).

Второе - и, скорее всего, то, что вы хотите - это оставить вообще data-bind="click" и вместо этого использовать обработчик отправки jQuery Validation (https://jqueryvalidation.org/validate).

$("#myform").validate({
    submitHandler: function(form) {
        viewModel.modelSubmit();
    }
});

Этот обработчик вызывается только после того, как проверка прошла успешно.