MDL + jQuery sprawdzania poprawności integracji: Obejście potrzebne do sprawdzania poprawności mdl-radio__

Question

Co wydaje się być normalnym przypadkiem użycia jQuery.validate z MDL poszło nie tak. Zobacz this gist.

Działa to dobrze:

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

to robi nic:

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

Mocowanie jQuery.validator.setDefaults({ debug: true }) nie ma wpływu - jak w zerowy debugowania - w wersji MDL. Usunięcie mdl-js-radio lub powoduje, że działa zgodnie z oczekiwaniami. Mam intuicję, że MDL aktualizuje DOM w sposób, który rozłącza dostęp jQuery do atrybutów name=, ale nie mogę znaleźć żadnych dowodów na poparcie tego w kodzie źródłowym MDL.

Ktoś ma integrację, która działa tutaj?

Answer 1

Po pewnych badaniach, myślę, że znalazłem rozwiązanie twojego problemu. To interesujące.
Dla mnie twój kod działa w przeglądarce Firefox, ale nie w Chrome i Safari. Powód jest dość prosty. MDL usuwa domyślny styl CSS z przycisków wejściowych, aby je ukryć (brak wyświetlania: brak, tylko wysokość: 0, szerokość: 0, przezroczystość ...). Chrome i Safari uważają, że tak jak są "ukryte". Przeglądając kod jQuery.validate, zdałem sobie sprawę, że przyciski opcji wejściowych nigdy nie zostały odkryte. (Twój kod działa z klasycznym wejściem w przeglądarce Chrome i Safari). I dlaczego ? Ponieważ jeśli spojrzysz na domyślne ustawienia jQuery.validate, zobaczysz, że ignorował dane wejściowe ukryte.

defaults: { 
    ... 
    ignore: ":hidden", 
    ... 
onfocusin: function(element, event) { 

a funkcja filtr

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

Aby temu zapobiec wystarczy dodać ten kawałek kodu:

jQuery.validator.setDefaults({ 
    ignore: "" 
}); 

To działa na mnie. Mam nadzieję, że to działa dla ciebie.