Knockout + Jquery Validate

Question

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

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

Есть идеи?

<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's <span id="age" data-bind="text: Age"></span>
    </div>
    <div>
        He's from
        <input type="text" id="birthPlace" name="birthPlace"/>
    </div>
    <div>
        <button data-bind="click: save">Click Me</button>
    </div>
</form>

Answer 1

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

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

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

Answer 2

В настоящее время существует нокаутирующая привязка проверки JQuery, которая мне очень полезна:

https://github.com/Knockout-Contrib/Knockout-Validation

Answer 3

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

Answer 4

Я использовал опцию submitHandler для validate ():

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

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

Answer 5

Правильно, что jQuery Validation выполняет свою проверку только на событии отправки формы (согласно ответу Райли).Так что если вы используете стиль Knockout data-bind="click:modelSubmit", это предотвратит запуск отправки формы (по умолчанию) и, следовательно, не позволит проверке jQuery делать что-либо.Первый - вернуть true из modelSubmit(), что заставит Knockout запустить форму отправки (но только после того, как modelSubmit закончится) (http://knockoutjs.com/documentation/click-binding.html).

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

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

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