jQuery驗證器需要檢查必需的onblur

我正在使用jQuery驗證器來驗證包含Kendo文本框的Razor視圖中的表單上的字段。驗證設置爲模型上的數據註釋。一切工作完美的驗證，如最大長度，電子郵件類型等，但是，我不能得到這個運行所需的領域，直到表單提交。我讀過的所有信息似乎都表明這是按照設計工作的。那麼，我不希望用戶爲了發現他們遺漏了一個必填字段而必須做一個回傳。當用戶關閉文本框時，沒有辦法在jQuery驗證器中包含data-val-required？jQuery驗證器需要檢查必需的onblur

我曾嘗試加入以下到我的文檔準備功能，但我似乎無法強制驗證的元素出現：

$('#myForm').validate({ 
    onfocusout: function (element) { 
    var required = $(element).attr('data-val-required'); 
    if (required) { 
     $(element).attr('required', 'required'); 
     //alert('Element ' + $(element).attr('id') + ' ' + $(element).attr('required')); 
     $(element).validate(); 
    } 
});

在這一點上，我甚至會接受一個完整的當頁面加載時在整個表單上進行規模驗證。我更習慣於包含所有驗證的Angular和Breeze，所以我希望我錯過了這個問題的一個明顯的解決方案。

previous question這種類型的解決這個問題是爲了重新編輯輸入。擺在那裏的解決方案將不起作用，因爲我希望在輸入輸入之前進行驗證 - 僅在onblur事件上 - 或者在調用控制器方法之前用戶單擊提交按鈕時進行特定的驗證調用。我開始認爲這是不可能的，並且真的希望我們使用的不是剃刀。還有什麼可以輕鬆驗證表單的嗎？

感謝您的幫助！

來源

2016-01-08 ChristyPiffat

不是$（element）.valid（）;而不是$（元素）.validate（）;？看看這裏：http://stackoverflow.com/questions/4622232/jquery-validation-onblur/16205614 –

@ axel.michel，實際上，當在一個回調函數的上下文中使用時，它是'this.element（element ）'。請參閱：http://stackoverflow.com/a/34644492/594235 – Sparky

那麼，我不希望用戶必須做一個回發，只是爲了找出他們遺漏了一個必填字段。

如果這是真的，那麼在進行任何客戶端驗證都沒有意義。換句話說，如果任何必填字段留空，此插件已禁止發佈到服務器。

當所有驗證規則爲滿意或者JavaScript被繞過/禁用時，客戶端驗證僅允許發佈到服務器。

The previous question那種解決這個問題的方法是重新編輯一個輸入。該解決方案提出將沒有工作...

不，以前只提問者認爲他的問題被重新編輯的輸入引起的。但是，OP只需從onkeyup函數中的默認「懶惰」切換到「Eager」驗證即可獲得他需要的內容。要滿足您的特定要求，只需在onfocusout回調函數中使用相同的技術。

onfocusout: function(element) { 
    this.element(element); // validate element immediately 
},

DEMO：http://jsfiddle.net/njfyey46/

你在這個企圖被打破了，因爲你已經中.validate()稱爲.validate();而.validate()僅用於初始化插件。要從回調函數中驗證單個元素，您可以使用the validator.element() method。在你的情況下，this代表驗證器。

此外，試圖確定該字段是否包含required屬性是沒有必要的。該插件已經自動確定哪些規則已被滿足，並觸發相應的回調函數。

來源

2016-01-09 16:17:19 Sparky

不確定這是爲什麼，但即使文本框中沒有任何內容，element.validity.valid值也是如此。我在頁面中添加了以下內容，但沒有任何區別。 $ .validator.setDefaults（{0} {0}}忽略：「」 }）; – ChristyPiffat

@ChristyPiffat，只有隱藏字段並希望驗證它們時，'ignore'選項才相關。否則，我看不到你的頁面，所以我不知道'element.validity.valid'應該代表什麼或你做錯了什麼。正如你所看到的，我的jsFiddle正在工作。也許你可以構建一個jsFiddle演示來重現你的問題。 – Sparky

上面的答案只要運行驗證工作，所以我把它標記爲正確的。然而，我有另一個問題，可能是由於Kendo或其他一些助手干擾了爲輸入設置HTML的方式。出於某種原因，對於模型中的數據註釋是[Required（）]但沒有必需屬性的所有屬性，存在data-val=true屬性。如果我添加了必需的屬性（required="required"），那麼來自@Sparky的回答完美無缺。否則，驗證只是假定輸入在空時是有效的。因此，我做了以下操作以確保始終添加必需的屬性，並根據需要驗證表單輸入（還要確認表單是否符合表單上的按鈕 - 最終將從列表中刪除取消按鈕）：

$(document).ready(function() { 
    var formName = 'myForm'; 
    var form = $('#' + formName); 
    if (form) { 
     var $inputs = $('#' + formName + ' input[data-val=true]'); 
     $inputs.each(function() { 
      this.required = true; 
     }); 

     var $buttons = $('#' + formName + ' button'); 
     $buttons.each(function() { 
      this.onclick = function() { 
       var validator = $(this.form).validate(); 
       validator.form(); 
      }; 
     }); 

     form.validate({ 
      onfocusout: function (element) { 
       //alert('Leaving ' + element.name + ' with id = ' + element.id + '. Is it valid? ' + element.validity.valid); 
       this.element(element); 
      } 
     }); 
    } 
});

來源

2016-01-11 23:25:36 ChristyPiffat

jQuery驗證器需要檢查必需的onblur

回答

相關問題