与MDL相似的是jQuery.validate的正常使用情况已经失败了.见
this gist.
@H_403_15@解决方法
这工作正常
<h1>Without MDL</h1> <form id="foo"> <input type="radio" name="bar" value="1" /> 1 <input type="radio" name="bar" value="2" /> 2 <input type="submit" /> </form> <script> $(function() { $('#foo').validate({ rules: { "bar": { required: true },},errorPlacement: function(error,element) { console.log(element); } }); }); </script>
这什么也不做:
<h1>With MDL</h1> <form id="zha"> <label for="baz__1" class="mdl-radio mdl-js-radio"> <input type="radio" name="baz" value="1" id="baz__1" class="mdl-radio__button" /> 1 </label> <label for="baz__2" class="mdl-radio mdl-js-radio"> <input type="radio" name="baz" value="2" id="baz__2" class="mdl-radio__button" /> 2 </label> <input type="submit" id="butt"/> </form> <script> $(function() { $('#zha').validate({ rules: { "baz": { required: true },element) { console.log(element); } }); }); </script>
在MDL版本中,附加jQuery.validator.setDefaults({debug:true})在零调试输出中没有任何作用.删除mdl-js-radio或mdl-radio__button使其按预期工作.我的直觉是,MDL正在以一种断开jQuery对name = attributes的访问方式来更新DOM,但是我找不到任何支持MDL源代码的证据.
有人在这里工作吗?
经过一番研究,我想我找到了一个解决你的问题的办法.这是一个有趣的.
对于我来说,您的代码适用于Firefox,但不适用于Chrome和Safari.原因很简单. MDL删除您的输入单选按钮的CSS默认样式以隐藏它们(不显示:none,只有height:0,width:0,opacity …). Chrome和Safari认为像“隐藏”一样.浏览jQuery.validate代码,我意识到输入单选按钮从未被发现. (您的代码适用于Chrome和Safari Safari上的经典输入).为什么?因为如果你看看jQuery.validate的默认设置,你可以看到他忽略了隐藏的输入.
对于我来说,您的代码适用于Firefox,但不适用于Chrome和Safari.原因很简单. MDL删除您的输入单选按钮的CSS默认样式以隐藏它们(不显示:none,只有height:0,width:0,opacity …). Chrome和Safari认为像“隐藏”一样.浏览jQuery.validate代码,我意识到输入单选按钮从未被发现. (您的代码适用于Chrome和Safari Safari上的经典输入).为什么?因为如果你看看jQuery.validate的默认设置,你可以看到他忽略了隐藏的输入.
defaults: { ... ignore: ":hidden",... onfocusin: function( element,event ) {
和滤镜功能
elements: function() { var validator = this,rulesCache = {}; // select all valid inputs inside the form (no submit or reset buttons) return $(this.currentForm) .find("input,select,textarea") .not(":submit,:reset,:image,[disabled]") .not( this.settings.ignore ) // This line .filter(function() { if ( !this.name && validator.settings.debug && window.console ) { console.error( "%o has no name assigned",this); } // select only the first element for each name,and only those with rules specified if ( this.name in rulesCache || !validator.objectLength($(this).rules()) ) { return false; } rulesCache[this.name] = true; return true; }); },
jQuery.validator.setDefaults({ ignore: "" });
它适用于我希望对你有效.