實時驗證骨幹窗體

我使用骨幹表格和已經創建了以下架構模型：實時驗證骨幹窗體

schema: 
    title: 
     type: "Text" 
     validators: ["required"] 
    description: 
     type: "TextArea" 
     validators: ["required"] 
    location: 
     type: "Text" 
     validators: ["required"]

當我嘗試，並提交與空字段的形式，驗證正確地發生他們都收到錯誤類。

但是，當我更新輸入以獲取內容時，直到我嘗試再次提交表單時，才從我的輸入中刪除錯誤類。同樣，如果我最初輸入一個有效的輸入，然後刪除所有內容，它不會通知我一個錯誤，直到我再次嘗試提交表單，而我想立即知道。

有沒有辦法在修改過的輸入字段上觸發驗證？

來源

2012-10-30 Peter Hamilton

彼得漢密爾頓，你有沒有想過如何一次只驗證一個領域？ –

我不記得發生了什麼事，但我覺得很遺憾我沒有......抱歉！ –

從文檔：http://backbonejs.org/#Model-validate：如果您對其進行更改默默

isValidmodel.isValid()

的模型可能進入無效狀態......用表單輸入打交道時非常有用。根據您的驗證功能，致電model.isValid()檢查模型當前是否處於有效狀態。

也https://github.com/thedersen/backbone.validation#what-gets-validated-when

什麼時候得到驗證？

如果您使用Backbone v0.9.1或更高版本，將驗證模型中的所有屬性。但是，如果名稱從未被設置（顯式或默認值），該屬性在被設置之前不會被驗證。

當填充表單時驗證表單非常有用，因爲您不希望提醒用戶輸入中尚未輸入的錯誤。

如果您需要驗證整個模型（這兩個屬性都已設置或沒有設置），您可以在模型上調用validate()或isValid(true)。

的骨架表格文檔特別提到model.validate：

https://github.com/powmedia/backbone-forms#model-validation

你可以很容易鉤model.Validate高達任何編輯的事件或單擊你想要的事件。

此外，你可能會發現這個有用的（不知道這是否是兼容Backbone.Forms雖然）：

https://github.com/thedersen/backbone.validation

來源

2012-10-30 12:27:43 jmh

我真的希望它只在一個字段上執行驗證。我知道當價值改變時我可以驗證表單，但如果我改變了輸入A，輸入B和C也得到驗證，並顯示錯誤，這不是一個非常好的用戶體驗。 –

你不需要backbone.validation，Backbone-forms有一個內置的驗證器... – inf3rno

你可以做的辦法「實時驗證」與骨幹，形式是通過擴展Backbone.Form模型並附加事件以調用您的自定義方法來驗證該字段，然後只需「新建」自定義窗體而不是Backbone.Form

（Backbone.Form is just Backbone的一個子類。查看）

下面是一些示例代碼：

var MyCustomForm = Backbone.Form.extend({ 
     events: { 
      "blur input": "validateRealTime" 
     }, 
     validateRealTime: function(e){ 
      if(e.currentTarget.value == "") return; 
      var err = this.fields[e.currentTarget.name].validate(); 
      if(err) 
       myDisplayErrorMethod(err.message); 
     } 
    });

關於這個偉大的事情是，它會利用你在模型架構中定義的驗證，所以你得到所有你在那裏的定義相同的驗證和消息好（如果你確實定義了自定義顏色）。

另外，如果您像我一樣定義了幾個驗證器，每次用戶從字段中「模糊」，它都會按順序調用驗證器，直到所有驗證器都通過爲止。所以這是一個加號。

附註，你會注意到我做了if(e.currentTarget.value == "") return;。這只是我的用例，我不想僅僅因爲用戶點擊並點擊而顯示錯誤。

來源

2013-09-19 19:35:15 Khon

實時驗證骨幹窗體

回答

相關問題