Knockout Validation - не проверять ввод, когда он пуст + оценивать при отправке

проверьте эту скрипку:

http://jsfiddle.net/bhzrw01s/

Я пытался сделать 2 вещи:

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

Во-вторых: мне нужно что-то для запуска проверки, когда я нажимаю на «Отправить» (если вы протестируете мою скрипку, появятся сообщения об ошибках, но не будет применяться errorClass css)

Спасибо

css:

input.error {
    color: red;
    border-color: red;    
}

js:

ko.validation.configure({
    insertMessages: false,
    decorateElement: true,
    errorElementClass: 'error',
    messagesOnModified: false    
});

function SignInViewModel() {

    var self = this;
    self.userName = ko.observable().extend({
        required: true
    });
    self.password = ko.observable().extend({
        required: true
    });

    self.errors = ko.validation.group(self);
    self.login = function (e) {

        if (self.errors().length == 0) {
            alert('No errors');
        } else {
            this.errors().forEach(function(data) {
               alert(data);
        });
            //self.errors.showAllMessages(true);
        }
    }

}
$(function () {
    ko.applyBindings(new SignInViewModel());
});

html:

<form>
<fieldset>
    <legend>User: <span data-bind='text: errors().length'></span> errors</legend>
    <label>User name: <input data-bind='value: userName' type="text"/></label><br/>
    <label>Password: <input data-bind='value: password' type="password"/></label>

</fieldset>
<button type="button" data-bind='click: login'>Login</button>
</form>

knockout.js knockout-validation
person ddacrs    schedule 10.09.2014    source источник
comment
Ваш первый вопрос действительно не имеет смысла. Вы хотите, чтобы поля были обязательными, но проверяйте ТОЛЬКО, если они не пусты. Это противоречит цели проверки required; он будет терпеть неудачу ТОЛЬКО КОГДА поле будет пустым. Поэтому, пожалуйста, поясните еще немного :) Второй вопрос можно решить, используя ko.validatedObservable в вашей группе полей и вызывая isValid() перед отправкой. Это проверит, правильно ли заполнена форма, но также покажет существующие ошибки и добавит классы ошибок и тому подобное. См. github.com/Knockout-Contrib/Knockout-Validation#getting-started   -  person Hans Roerdinkholder    schedule 11.09.2014
comment
Спасибо за ответ, мой первый вопрос о том, как я могу применить CSS только тогда, когда я проверю isValid ()? Потому что я могу иметь дело с установкой сообщения false для insertMessages (элементы, теряющие фокус, не будут показывать проверку). Есть ли у вас какие-либо идеи? : D   -  person ddacrs    schedule 11.09.2014
comment
Ах, теперь я понимаю. Но, к сожалению, я понятия не имею, как вы могли этого добиться.   -  person Hans Roerdinkholder    schedule 12.09.2014

Ответы (1)


arrow_upward
8
arrow_downward

Первое решение сделает 90% того, о чем вы просите. Он не будет отображать никакой проверки, пока пользователь не нажмет "Отправить" или пока он не удалит ранее заполненное поле. Как только они сломают печать (так сказать), они получат обратную связь проверки в реальном времени для этого поля. Это решение, которое я бы использовал, потому что именно так должна была вести себя нокаут-валидация.

http://jsfiddle.net/k08m4dfx/

    self.login = function (e) {
        if (self.errors().length > 0) {
            self.errors.showAllMessages(true);
            this.errors().forEach(function(data) {
               alert(data);
            });
        }
    }

Если по какой-то причине вам нужно отложить все отзывы о проверке до тех пор, пока они не щелкнут, вы можете испортить флаг isModified, чтобы получить желаемое поведение. Хотя мне это кажется немного неуклюжим.

http://jsfiddle.net/zd97gjg4/

    ko.extenders.deferValidation = function (target, option) {
        if (option) {
            target.subscribe(function(){
                target.isModified(false);
            });
        }

        return target;
    };

    self.userName = ko.observable().extend({
        required: {message: 'User name is required' },
        deferValidation: true
    });

    self.password = ko.observable().extend({
        required: {message: "Password is required" },
        deferValidation: true
    });
person Derpy    schedule 04.11.2014