web-dev-qa-db-ja.com

ノックアウト検証：入力の変更ではなく、ボタンのクリックでフィールドを検証する方法

次のノックアウト検証プラグインを使用しています： 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/

javascriptvalidationknockout.jsknockout-validation
8
Hristo Eftimov

そうですね、オブザーバブルが変更されると、バリデーターは解雇されます。しかし...バリデーターのonlyIfオプションでそれらをだますことができます。 Fiddlerサンプル どのように機能するかを作成しました。

ここでの質問はもっと...ユーザーが最初にクリックした後に何をしたいのか...

基本的に、サンプルはすべてのバリデーターにonlyIf条件を設定し、validateNowobservableは、バリデーターがいつ評価するかを決定します。送信方法。

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);

...サンプルでは入力の周りに赤いボックスしか配置されていないため、データバインディングも少し再調整しました。

私はコンストラクターを使ってクロージャーを作成するのに慣れているので、サンプルはあなたのものと同じ「アーキテクチャ」ではありませんが、あなたはそれを理解すると思います

17
CodeHacker