MDL + jQuery validate integration: Work-around needed for mdl-radio__button validation -

what seem normal use-case of jquery.validate mdl has gone awry. see this gist.

this works fine:

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

this nothing:

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

attaching jquery.validator.setdefaults({ debug: true }) has no effect -- in zero debug output -- in mdl version. removing either mdl-js-radio or mdl-radio__button makes work expected. intuition mdl updating dom in way disconnects jquery's access name= attributes, can't find evidence support in mdl source code.

anybody got integration works here?

after research, think found solution problem. it's interesting one.
me, code works on firefox not on chrome , safari. reason pretty simple. mdl remove css default style of input radio buttons hide them (not display: none, height: 0, width: 0, opacity...). chrome , safari consider there "hidden". browsing jquery.validate code, realized input radio buttons never discovered. (your code works classic input on chrome , safari). , why ? because if take @ default settings of jquery.validate can see ignore input hidden.

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

and filter function

elements: function() {     var validator = this,         rulescache = {};      // select valid inputs inside form (no submit or reset buttons)     return $(this.currentform)     .find("input, select, textarea")     .not(":submit, :reset, :image, [disabled]")     .not( this.settings.ignore ) // line     .filter(function() {         if ( !this.name && validator.settings.debug && window.console ) {             console.error( "%o has no name assigned", this);         }          // select first element each name, , rules specified         if ( this.name in rulescache || !validator.objectlength($(this).rules()) ) {             return false;         }          rulescache[this.name] = true;         return true;     }); }, 

to prevent add piece of code :

jquery.validator.setdefaults({     ignore: "" }); 

it works me. hope works you.