<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> 
.error{
  color:red;
}
 $(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();
                }
                
            });
    });

External CSS

  1. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js