<div class="container">
<div class="row">
<div class="well col-md-offset-3 col-md-6">
<form action="" method="post" id="register-form" novalidate="novalidate">
<h2>Registration form</h2>
<div id="form-content">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name">
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" name="password">
</div>
<div class="form-group">
<label for="city">City</label>
<input class="form-control" type="text" name="city">
</div>
<div class="form-group">
<label> Gender </label><br/>
<label for="gender_male">Male
</label>
<input type="radio" id="gender_male" value="male" name="gender" >
<label for="gender_female">Female</label>
<input type="radio" value="female" name="gender">
</div>
<div class="form-group">
<input class="btn btn-primary" type="submit" name="submit">
</div>
</div>
</form>
</div>
</div>
</div>
$(document).ready(function($) {
$("#register-form").validate({
rules: {
name: "required",
password: {
required: true,
minlength: 6
},
city: "required",
gender: "required"
},
messages: {
name: "Please enter your Name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 6 characters long"
},
city: "Please enter your city",
gender: "This field is required"
},
errorPlacement: function(error, element)
{
if ( element.is(":radio") )
{
error.appendTo( element.parents('.form-group') );
}
else
{ // This is the default behavior
error.insertAfter( element );
}
},
submitHandler: function(form) {
form.submit();
}
});
});