KnockoutJS僅在字段部分完成時驗證

尋找解決方案以驗證輸入字段是否部分完整，即，如果用戶未輸入值，則不驗證。 http://jsfiddle.net/2H2Bv/KnockoutJS僅在字段部分完成時驗證

當所有字段滿足其驗證要求時，也就是說，當附加到每個輸入的所有驗證消息都已消失並且之前，在頂部看到用於除去驗證摘要消息「完整缺失字段」的解決方案在點擊提交按鈕...

HTML

<script id="customMessageTemplate" type="text/html"> 
    <em class="customMessage" data-bind='validationMessage: field'></em> 
</script> 

<!-- ko if: displayAlert --> 
<p class="customMessage" data-bind="text: validationSummary"></p> <br /> 
<!-- /ko --> 

<fieldset> 
    <legend>Details</legend> 
    <label>First name: 
     <input data-bind='value: firstName' /> 
    </label> 
    <label>Last name: 
     <input data-bind='value: lastName' /> 
    </label> 
    <div data-bind='validationOptions: { messageTemplate: "customMessageTemplate" }'> 
     <label>Email: 
      <input data-bind='value: emailAddress' required pattern="@" /> 
     </label> 
</fieldset> 
<br> 
<button type="button" data-bind='click: submit'>Submit</button> 
<br> 
<br> <span data-bind='text: errors().length'></span> errors

JS：

ko.validation.rules.pattern.message = 'Invalid.'; 

ko.validation.configure({ 
    decorateElement: true, 
    registerExtenders: true, 
    messagesOnModified: true, 
    insertMessages: true, 
    parseInputAttributes: true, 
    messageTemplate: null 
}); 

var viewModel = function() { 
    this.firstName = ko.observable().extend({ 
     minLength: 2, 
     maxLength: 10 
    }); 
    this.lastName = ko.observable().extend({ 
     required: true 
    }); 
    this.emailAddress = ko.observable().extend({ // custom message 
     required: { 
      message: 'Enter your email address.' 
     } 
    }); 
    this.validationSummary = ko.observable("Complete missing fields below:"); 
    this.displayAlert = ko.observable(false); 
    this.submit = function() { 
     if (this.errors().length == 0) { 
      alert('Thank you.'); 
     } else { 
      this.displayAlert(true); 
      this.errors.showAllMessages(); 
     } 
    }; 
    this.errors = ko.validation.group(this); 
}; 

ko.applyBindings(new viewModel());

來源

2014-01-20 hotdiggity

「部分完成」是什麼意思？在你的例子中，所有的特性都是必需的，在這種情況下，「部分完成」意味着什麼？你能一步一步地描述你的小提琴中的代碼應該如何表現嗎？ – nemesv

部分我的意思是，如果用戶輸入了一個值，然後根據輸入數據的驗證標準驗證該字段，但是，如果他們沒有輸入值，那麼根本就不驗證該字段。 – hotdiggity

我f我理解正確，您希望電子郵件驗證在用戶鍵入內容後運行，而不是在頁面加載時顯示爲「紅色」。

要做到這一點，你需要讓你的輸入變爲刪除required和pattern attribues：

<input data-bind='value: emailAddress' />

，並驗證電子郵件添加到您的模型，以便您觀察到的變成：

this.emailAddress = ko.observable().extend({ // custom message 
    required: { 
      message: 'Enter your email address.' 
    }, email:true 
});

已更新fiddle

來源

2014-01-20 09:43:52

差不多！基本上它的工作原理如下： this.emailAddress = ko.observable（）。extend（{email：true}）; ...但這對其他領域將如何工作？ – hotdiggity

我不明白你問什麼。但你可以找到更多關於基因敲除驗證的信息[這裏]（https://github.com/Knockout-Contrib/Knockout-Validation） –

基本上我試圖從用戶那裏捕獲儘可能多的正確信息，強制他們完成所有的領域。如果他們輸入了名字的數據，然後驗證該字段，但是如果他們沒有輸入值，那麼不要打擾驗證該字段。 – hotdiggity

KnockoutJS僅在字段部分完成時驗證

回答

相關問題