brianthelion/mdl-radio-bug.html

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