MDL + jQuery проверяет интеграцию: требуется работа для проверки mdl-radio__button

Казалось бы, что обычный случай использования jQuery.validate с MDL пошатнулся. См. этот смысл.

Это отлично работает:

<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>

Прикрепление jQuery.validator.setDefaults({ debug: true }) не влияет - как на нулевой вывод отладки - в версии MDL. Удаление либо mdl-js-radio, либо mdl-radio__button заставляет его работать должным образом. Моя интуиция заключается в том, что MDL обновляет DOM таким образом, что отключает доступ к jQuery к атрибутам name=, но я не могу найти никаких доказательств, подтверждающих это в исходном коде MDL.

Кто-нибудь получил интеграцию, которая работает здесь?

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; }); },

Ответ 1