MDL jQuery验证集成:mdl-radio__button验证所需的工作

前端之家收集整理的这篇文章主要介绍了MDL jQuery验证集成:mdl-radio__button验证所需的工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
与MDL相似的是jQuery.validate的正常使用情况已经失败了.见 this gist.

这工作正常

<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源代码的证据.

有人在这里工作吗?

@H_403_15@解决方法
经过一番研究,我想我找到了一个解决你的问题的办法.这是一个有趣的.
对于我来说,您的代码适用于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: ""
});

它适用于我希望对你有效.

猜你在找的jQuery相关文章