Knockout Validation: как проверять поля при нажатии кнопки, а не при изменении ввода

Я использую следующий плагин проверки нокаута: https://github.com/Knockout-Contrib/Knockout-Validation

Я хочу проверять свои поля, когда я нажимаю кнопку «Отправить», а не каждый раз, когда я меняю значение ввода. Как я могу это сделать?

Javascript:

ko.validation.init({
    insertMessages:false,
    messagesOnModified:false,
    decorateElement: true,
    errorElementClass: 'wrong-field'
}, true);

var viewModel = {
    firstName: ko.observable().extend({minLength: 2, maxLength: 10}),
    lastName: ko.observable().extend({required: true}),
    age: ko.observable().extend({min: 1, max: 100}),
    submit: function() {
        if (viewModel.errors().length === 0) {
            alert('Thank you.');
        }
        else {
            alert('Please check your submission.');
            viewModel.errors.showAllMessages();
        }
    },
};

viewModel.errors = ko.validation.group(viewModel);

ko.applyBindings(viewModel);

HTML:

<fieldset>    
    <div class="row" data-bind="validationElement: firstName">
        <label>First name:</label>
        <input type="text" data-bind="textInput: firstName"/>
    </div>

    <div class="row" data-bind="validationElement: lastName">
        <label>Last name:</label>
        <input data-bind="value: lastName"/>
    </div>

    <div class="row">
        <div class="row">
            <label>Age:</label>
            <input data-bind="value: age" required="required"/>
        </div>
    </div>
</fieldset>

<fieldset>
    <button type="button" data-bind='click: submit'>Submit</button>
    &nbsp;
</fieldset>

Это мой jsfiddle: http://jsfiddle.net/xristo91/KHFn8/6464/


javascript validation knockout.js knockout-validation
person Hristo Eftimov    schedule 18.03.2016    source источник
comment
ваш jsfiddle, кажется, работает как указано - я думаю, вы просто пропустили некоторые required: true   -  person Random Dev    schedule 18.03.2016
comment
К сожалению, этого недостаточно :( Я хочу выполнять проверки и привязывать класс ошибок при нажатии кнопки отправки, а не при изменении в реальном времени.   -  person Hristo Eftimov    schedule 18.03.2016
comment
ну тогда просто переместите логику внутрь click-handler-функции и сделайте это вручную   -  person Random Dev    schedule 18.03.2016

Ответы (1)


arrow_upward
19
arrow_downward

Что ж, да, валидаторы увольняются при изменении наблюдаемых. Но... вы можете обмануть их с помощью опции onlyIf валидаторов. Я сделал пример Fiddler, как это могло бы работать.

Вопрос здесь больше... что вы хотите сделать после первого клика пользователя....

По сути, образец ставит условие onlyIf для всех валидаторов, а наблюдаемый объект validateNow решает, когда валидаторы должны оценивать... в основном так, как вы хотели... в методе отправки.

self.validateNow = ko.observable(false);

onlyIf оценивается на всех валидаторах:

self.firstName = ko.observable().extend({
minLength: {
  message:"minlength",
  params: 2,
  onlyIf: function() {
    return self.validateNow();
  }
},

и validateNow устанавливается только при отправке

self.submit = function() {
self.validateNow(true);

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

Я привык создавать свои замыкания с помощью конструкторов. Так что образец не такой "архитектуры", как у вас, но я думаю, вы поймете это

person CodeHacker    schedule 18.03.2016