What would seem to be a normal use-case of jQuery.validate with 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 does 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 -- as in zero debug output -- in the MDL version. Removing either mdl-js-radio
or mdl-radio__button
makes it work as expected. My intuition is that MDL is updating the DOM in a way that disconnects jQuery's access to name=
attributes, but I can't find any evidence to support that in the MDL source code.
Anybody got an integration that works here?