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>