jQuery form validation

Hi folks, now we are going to see, how we can do jquery form validations using jquery and HTML


<html>
<head>
<meta charset="utf-8">
<title>Registration</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<section>
   <div class="white_bg" id="white_bg">
    <h1>Registration</h1>
	<form  method="post"  id="add_builder" enctype="multipart/form-data" >
			    <label>Name</label>
				<input type="text" name="br_name" class="form-control" /></br></br>
				<label>Email Address</label>
				<input type="text" name="br_email" class="form-control"/></br></br>
				<label>Mobile</label>
				<input type="text" name="br_mobile" class="form-control"/></br></br>
				<p>Dob: <input type="text" name="nu_datebirth" id="nu_datebirth" /></p>
				<label class="nu_label">Age</label>
				<input type="text" name="a_ge" id="a_ge" class="nu_field" readonly/></br></br>
				<label>Gender</label></br>
				<input type="radio" name="gender" value="male"> Male
				<input type="radio" name="gender" value="female"> Female</br></br>
				<label>City</label></br>
				<select name="city">
					   <option value="">Select City</option>
					   <option value="Banglore">Banglore</option>
				</select></br></br>
				<label class="nu_label">Residence / Contact Address</label></br>
				<textarea rows="5" cols="10" name="user_addr" id="user_addr" class="msg_fld" ></textarea></br></br>
				<label class="nu_label"><input type="checkbox" id="check" name="check" value="check">Click to copy Residence / Contact Address</label></br></br>
				<label class="nu_label">Permanent Address</label></br>
				<textarea rows="5" cols="10" name="nomi_addr" id="nomi_addr" class="msg_fld" ></textarea><br></br></br>
				<label>Upload file </label></br>
			    <input type="file" name="upload_file" id="upload_file" class="form-control"></br></br>
				Terms and Conditions<input type="checkbox" name="terms" value="yes"><br></br></br>
				<input type="submit" id="build-sub" name="build-sub" value="SUBMIT" /> 			
		</form>
	</section>

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.8.1/jquery.validate.min.js"></script>
<script>

$(document).ready(function()
{
$("input#check").click(function(){ 
if ($("input#check").is(':checked')) 
{ 
var a = $("#user_addr").val();
$("#nomi_addr").val($("#user_addr").val()); 
} 
else 
{ 
   $("#nomi_addr").val(""); 
} 
});

});

$(function() {
	$("#nu_datebirth").datepicker({
	onSelect: function(value, ui) {
        var today = new Date(), 
            age = today.getFullYear() - ui.selectedYear;
        $('#a_ge').val(age);
    },
	 
	dateFormat: 'dd-mm-yy',changeMonth: true,changeYear: true,yearRange:"c-100:c+0"
	});
	
});
$('INPUT[type="file"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) {
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif':
            $('#build-sub').attr('disabled', false);
            break;
        default:
             alert("Only '.jpeg','.jpg','.pdf' formats are allowed.");
            this.value = '';
    }
});

(function($,W,D)
{
    var JQUERY4U = {};

    JQUERY4U.UTIL =
    {
        setupFormValidation: function()
        {
            //form validation rules
            $("#add_builder").validate({
                rules: {
					br_name: {
                        required: true,
                    },
					br_mobile: {
                        required: true,
                        number: true,
					},
					br_email: {
                        required: true,
						email: true,
                     },
					 gender: {
                        required: true,
                    },
					 terms: {
                        required: true,
                    },
					city: {
                        required: true,
                    },
					user_addr: {
                        required: true,
                    },
					upload_file: {
                        required: true,
                    },
					dob: {
                        required: true,
                    },
				},
				messages: {
				 
					br_name: {
                        required: "Enter Name",
                    },
					
					br_mobile: {
                           required: "Enter Mobile number",
					},
					 br_email: {
                           required: "Enter Email",
					},
					gender: {
                           required: "Select Gender",
					},
					terms: {
                           required: "Check Terms and conditions",
					},
					city: {
                           required: "Select City",
					},
					user_addr: {
                           required: "Enter Address",
					},
					upload_file: {
                           required: "Upload file",
					},
					dob: {
                           required: "Select dob",
					},
					},
                
                submitHandler: function(form) {
				form.submit();
				  }
				  
            });
        }
    }
    //when the dom has loaded setup form validation rules
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });
})(jQuery, window, document);
</script>
</body>
</html>