Skip to content

Instantly share code, notes, and snippets.

@brianthelion

brianthelion/mdl-radio-bug.html

Created January 20, 2016 23:18
Show Gist options
  • Save brianthelion/5e3a7491631b7e09795e to your computer and use it in GitHub Desktop.
Save brianthelion/5e3a7491631b7e09795e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
mdl-radio-bug.html
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h1>Standard</h1>
<form id="foo">
<input type="radio" name="bar" value="1" /> 1
<input type="radio" name="bar" value="2" /> 2
<input type="submit" />
</form>
<h1>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" />
</form>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js'></script>
<script>
$(function() {
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$('#foo').validate({
rules: {
"bar": {
required: true
},
},
errorPlacement: function(error, element) {
console.log(element);
element.css('background-color', 'pink');
}
});
$('#zha').validate({
rules: {
"baz": {
required: true
},
},
errorPlacement: function(error, element) {
console.log(element);
element.css('background-color', 'pink');
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment