jquery - MDL + jQuery 验证集成 : Work-around needed for mdl-radio__button validation

Question

看似正常的 jQuery.validate 与 MDL 用例却出现了问题。请参阅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
                 },
             },
             errorPlacement: function(error, element) {
                 console.log(element);
             }
         });
     });
</script>

在 MDL 版本中，附加 jQuery.validator.setDefaults({ debug: true }) 没有任何效果，就像零调试输出一样。删除 mdl-js-radio 或 mdl-radio__button 使其按预期工作。我的直觉是 MDL 正在以一种断开 jQuery 对 name= 属性的访问的方式更新 DOM，但我在 MDL 源代码中找不到任何证据支持这一点。

有人可以在这里使用集成吗？

Answer 1

经过一番研究，我想我找到了解决您问题的方法。这是一个有趣的。
对我来说，你的代码可以在 Firefox 上运行，但不能在 Chrome 和 Safari 上运行。原因很简单。 MDL 删除输入单选按钮的 CSS 默认样式以隐藏它们(不显示:无，仅高度:0，宽度:0，不透明度...)。 Chrome 和 Safari 认为存在“隐藏”。浏览 jQuery.validate 代码，我意识到输入单选按钮从未被发现。 (您的代码适用于 Chrome 和 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: ""
});

这对我有用。希望它对您有用。