1

我有以下代碼:jQuery驗證自定義驗證不正確

HTML:

<form id="myTestFrom"> 
    <input type="text" name="test_txb" id="test_txb" value="" class="form-control" /> 
</form> 

JS:

$(function() { 

     $.validator.addMethod('testValidationMethod', function (value, element) { 
      alert('FIRED'); 

     }, 'test error message'); 

     $('#myTestFrom').validate({ 
      rules: { 
       /* (*) */test_txb: { testValidationMethod: true } 
      } 
     }); 
    }); 

的問題很簡單:我的自定義驗證方法永遠不會被調用。

我已經在StackOverflow(例如this)上閱讀過幾個類似的問題和答案,但他們都沒有工作。事實上,恰恰相反。他們大多數人建議jQuery驗證程序通過查找名稱爲的指定而不是指定的ID來查找輸入字段。也就是說,(*)的對象屬性名稱必須與要驗證的輸入的name屬性匹配。然而,正如你在我的代碼中看到的,我的做的在我的輸入上有test_txb的名字(以及id),但是由於某種原因,我的驗證器方法永遠不會按照上面的代碼被調用。

然而,如果我作爲一個類中添加驗證方法(testValidationMethod)的名稱我輸入字段,然後它被調用。這聽起來與我在SO上讀過的任何東西都有矛盾,因爲所有這些答案都表明默認行爲是驗證器在設置自定義驗證規則時檢查元素的name屬性。

那麼這裏發生了什麼,請問有人能解釋一下嗎?最簡單的解決方案當然就是添加前面提到的類名,但是我討厭用別的不必要的東西亂丟我的代碼,特別是如果我不完全理解爲什麼我應該這樣做的原因。

編輯: jQuery的驗證器版本是1.15.1

編輯2:我也有ASP.NET MVC不顯眼的lib引用,也許這東西conflits?

+0

丁,丁,丁....你的「編輯2」是根本原因。你不能多次調用'.validate()'。由於不顯眼的自動構造和調用'.validate()',你的實例被完全忽略。 – Sparky

回答

0

在驗證插件我已經想通了,這個問題是由以下行造成的源代碼,環顧四周後:

// Check if a validator for this form was already created 
var validator = $.data(this[ 0 ], "validator"); 
if (validator) { 
    return validator; 
} 

因此,這裏發佈的任何答案都表明他們可以使其工作的原因是他們自己初始化了驗證器。可能我得到了這個奇怪的行爲,因爲ASP.NET unobtrusive庫默認初始化了驗證器,因此即使我將規則傳入validate方法中也沒有添加任何東西,並且我找回了預配置的驗證器對象(呃,自動化東西的缺點.. )。我終於通過使用後期初始化規則添加工作,例如:

$('#test_txb').rules('add', { 
    testValidationMethod: true 
}); 
+0

你不能多次調用'.validate()'。由於不顯眼的構造和調用'.validate()',你的實例被完全忽略。 – Sparky

0

您是否使用jquery添加了用於驗證的插件?

https://cdnjs.com/libraries/jquery-validate

因爲我有,當我複製你的解決方案沒有問題/粘貼裏面codepen。

編輯:我想你應該有一個返回值的驗證

編輯2:關於您的編輯,我搜索谷歌和發現的東西,看起來有趣,鏈接belove:

https://www.tigraine.at/2011/08/26/jquery-validate-and-microsofts-unobtrusive-validation-dont-play-well-together

+0

是的,我已經添加了,否則我甚至不能引用'$'上的驗證器字段。關於返回值,我也嘗試過這樣,它仍然不會被調用,並且添加返回值無法解釋爲什麼如果我添加提到的類名稱,它會被調用。 –

0

可能是你忘了,包括確認或jQuery的 的js這是你的工作代碼

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<form id="myTestFrom"> 
     <input type="text" name="test_txb" id="test_txb" value="" class="form-control" /> 
</form> 

JavaSript

$(document).ready(function(){ 
    $.validator.addMethod('testValidationMethod', function(value, element) { 
    console.log('FIRED'); 
    }, 'test error message'); 

    $('#myTestFrom').validate({ 
    rules: { 
     test_txb: { 
     required: true, 
     testValidationMethod: true 
     } 
    } 
    }); 

}); 

Fiddle