2015-06-02 93 views
0

我有以下html和js,但它不會觸發對文本輸入字段模糊或表單提交的jquery.validate驗證。如果我直接向文本輸入字段添加「required」屬性,則默認的錯誤消息會替代。任何人都可以請幫我找出爲什麼下面不起作用?jQuery驗證不觸發

<!doctype html> 
<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.validate.min.js"></script> 
<script type="text/javascript" src="jquery.validate.unobtrusive.min.js"></script> 

</head> 
<body> 
    <form id="test" action="test.html" method="post"> 
     <input type="text" name="txtName" />  
     <input type="submit" name="btnSubmit" /> 
    </form> 
</body> 
</html> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     ValidateForm(); 

    }); 

    function ValidateForm(){ 
     $.validator.unobtrusive.parse($("form")); 

     $('#test').validate({ 
      rules: { 
       "txtName": "required" 
      }, 
      messages: { 
       "txtName": "this name is required for sure!" 
      }, 
      errorPlacement: function (error, element) { 
       $(element).parent().append(error); 
      }, 
      onfocusout: function (element) { this.element(element); } 
     }); 
    } 
</script> 

回答

1
<script type="text/javascript" src="jquery.validate.unobtrusive.min.js"></script> 

你爲什麼包括unobtrusive插件?

您不能同時使用unobstrusive插件,而您自己則調用.validate()方法。

爲什麼?

因爲unobtrusive插件會根據HTML屬性自動構造並調用.validate()方法。

由於該插件僅使用第一次調用.validate()來初始化驗證,它會自動忽略所有後續調用。所以你的電話.validate()完全被忽略。

如果我將「required」直接添加到文本輸入字段,則默認的錯誤消息會替代。

由於unobtrusive插件,您對.validate()的調用完全被jQuery Validate忽略。這就是爲什麼只有當您將required屬性放置在您的input元素中時才起作用。

徹底清除unobtrusive插件,它工作正常:

http://jsfiddle.net/ocx864nu/