JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<form method="post" id="newform">
<p class="first">
<label for="name">Name: </label><br />
<input id="name" id="name" name="name" type="text" class="required" maxlength="64" />
</p>
<p>
<label for="gender_male">
<input type="radio" id="gender_male" value="m" name="gender" validate="required:true" />
Male
</label>
<label for="gender_female">
<input type="radio" id="gender_female" value="f" name="gender"/>
Female
</label>
<label for="gender" class="error">Please select your gender</label>
</p>
<p>
<label for="subject">Subject: </label><br />
<input id="subject" name="subject" type="text" class="required" maxlength="128" />
</p>
<p>
<label for="message">Message: </label><br />
<textarea id="message" name="message" class="required" maxlength="1024"></textarea>
</p>
<button type="submit" name="send" />Send Message</button>
</form>
<div id="errordiv"></div>
JavaScript
$('#newform').validate({
errorPlacement: function(error, element) {
if (element.is(":radio")) {
error.prependTo(element.parent());
}
else { // This is the default behavior of the script
error.insertAfter(element);
console.log('here');
}
},
showErrors: function(errorMap, errorList) {
var summary = "You have the following errors: \n";
$.each(errorList, function() {
summary += " * " + this.message + "\n";
});
$('#errordiv').html(summary);
this.defaultShowErrors();
},
submitHandler: function() {
alert("submitted!");
},
messages: {
name : "name error",
subject: "subject error",
message: "message error"
}
});