2015-06-02 94 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/