Form Validation Using Jquery

The code that every web developer looking for. Validating a form in all possible ways. A simple and effective code is here. 

Here we are validating all common input types which we use in register form like name, email, phone, password, radio button, select option.

Includes

    <link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

Script

<script>

function Validate() {

(function ($) {

 jQuery.validator.setDefaults({
       errorPlacement: function (error, element) {
            error.appendTo('#invalid-' + element.attr('id'));
       }
});

//To validate letters

$.validator.addMethod("letters", function (value, element) {

   return this.optional(element) || value == value.match(/^[a-zA-Z\s]*$/);
});

//To validate Number

$.validator.addMethod("number", function (value, element) {

      return this.optional(element) || value == value.match(/^[0-9]*$/);

});

//To validate digits for phone number that should start with only 7 or 8 or 9

$.validator.addMethod("digits", function (value, element) {

    return this.optional(element) || value == value.match(/^^[789]\d{9}$/);

});

//To validate password

$.validator.addMethod("pwcheckNumber",

   function (value, element) {

   return /\d/.test(value);

});

$.validator.addMethod("pwcheckUppercase",

   function (value, element) {

   return /[A-Z]/.test(value);

});

$.validator.addMethod("pwcheckSpecial",

     function (value, element) {

     return /[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/.test(value);

});

//Form validation

$("#Form").validate({

                    

rules: {

Title: {

     required: true,                  

},

FirstName: {

   required: true,

   minlength: 3,

   letters: true                      

},

Mobile: {

    required: true,

    number: true,

    minlength: 10,

    maxlength: 10,

    digits: true                      

},

Email: {

    required: true,

    email: true,

},

Password: {

     required: true,

     minlength: 8,

     pwcheckNumber: true,

     pwcheckUppercase: true,

     pwcheckSpecial: true,          

},

ConfirmPassword: {

     required: true,

     equalTo: "#Password"                   

},

Gender: {

     required: true,

}

     

},

//Message suggestions that you see on screen     

messages: {

Title: {

       required: "Please select title",

},

FirstName: {

      required: "Please enter first name",

      minlength: "Name should be minimum 3 characters",

      letters: "Only letters and spaces are allowed",                              

},

Mobile: {

       required: "Please enter  phone number",

       minlength: "Please enter valid phone number",

       maxlength: "Please enter valid phone number",

       digits: "Phone number should be start with 789", 

},

Email: {

      required: "Please enter email",

      minlength: "Please enter a valid email address",

},

Password: {

       required: "Please enter password",

       minlength: "Password must be minmum 8 character",

       pwcheckNumber: "Password must contains one digit",

       pwcheckUppercase: "Password must contains atleast one uppercase letter",

       pwcheckSpecial: "Password must contains atleast one special character",

},

ConfirmPassword: {

       required: "Please enter confirm password ",

       equalTo: "Confirm password must same as password",

},

Gender: {

       required: "Please select gender type"                     

}

}

});

})($);

}

</script>

//CSS

<style>

.error_msg {

        color: red;

}

body{

        position: absolute;

        width: 600px;

        height: 200px;

        z-index: 15;

        top: 15%;

        left: 30%;

        margin: -100px 0 0 -150px;

     }

.box-header{

        background: #dc3545;

        width: 500px;

        height: auto;

text-align: center;

        color: white;

        font-size: 30px;

        padding: 10px;

    }

.box{

        background: #43c181;

        padding-top: 10px;

        padding-left: 110px;

        padding-bottom: 30px;

        width: 500px;

        height: auto;

    }

</style>

<body onload="Validate()">

<div class="box-header">Register From</div>

<div class="box">

    <form action='#' method='post' id='Form' enctype='multipart/form-data'>

        <div class="col-md-8">

            <label>Title</label>

            <select id="Title" name="Title" class="form-control">

                <option value="">Select Title</option>

                <option value="Mr.">Mr.</option>

                <option value="Mrs.">Mrs.</option>

                <option value="Ms.">Ms.</option>

                <option value="Mss.">Mss.</option>

                <option value="Dr.">Dr.</option>

            </select>

            <div id="invalid-Title" class="error_msg"></div>

        </div>

        <div class="col-md-8">

            <label>First Name</label>

            <input type="text" id="FirstName" name="FirstName" class="form-control"

                   placeholder="First Name"/>

            <div id="invalid-FirstName" class="error_msg"></div>

        </div>

        <div class="col-md-8">

            <label>Mobile</label>

            <input type="text" id="Mobile" name="Mobile" class="form-control" placeholder="Mobile">

            <div id="invalid-Mobile" class="error_msg"></div>

        </div>

        <div class="col-md-8">

            <label>Email</label>

            <input type="text" id="Email" name="Email" class="form-control" placeholder="Email">

            <div id="invalid-Email" class="error_msg"></div>

        </div>

        <div class="col-md-8">

            <label>Password</label>

            <input type="password" id="Password" name="Password" class="form-control"

                   placeholder="Password"/>

            <div id="invalid-Password" class="error_msg"></div>

        </div>

        <div class="col-md-8">

            <label>Confirm Password</label>

            <input type="password" id="ConfirmPassword" name="ConfirmPassword" class="form-control"

                   placeholder="ConfirmPassword"/>

            <div id="invalid-ConfirmPassword" class="error_msg"></div>

        </div>

        <div class="col-md-8">

            <label>Gender</label>

            <input type="radio" id="Gender" name="Gender" value="Male"> Male

            <input type="radio" id="GenderNew" name="Gender" value="Female"> Female<br>

            <div id="invalid-Gender" class="error_msg"></div>

        </div>

        <div class="col-md-12" align="center">

            <input type="submit" value="Submit" class="btn btn-danger" id="Submit" name="Submit"

                   onclick="Register()">

        </div>

    </form>

</div>

</body>

Result

*Please share, comment and subscribe to PHP Javascript for more.

* Display JSON data in dropdown

* Display JSON data in a table