FOLLOW

Thursday, March 22, 2018

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



2 comments:

  1. Thank for sharing with us.
    Waiting for a revolutionary and an outstanding Carpet shampooer! Expecting such a product form Bissell as usual? To meet up your expectations, the company has introduced Bissell preheat 2x revolution this time that is great for deep cleaning of your carpets and for making them new. So, delay no further to read about Bissell Proheat 2x Revolution reviews.

    ReplyDelete
  2. Buy perfect money in India @Rs.70/- per pm Sell @Rs.58/- per pm,CALL 08054019105, Chandigarh, 160017

    --------------------------------------------------------------------------------------------------------------

    Buy/Sell Perfect Money At Reasonable Rates. We Provide Perfect Money At best Rates.
    We also sell buy Perfect Money, neteller and Bitcoin.

    Call us : +91 9517544444

    Gtalk : garrysingh1598

    Web.: www.sellperfectmoney64.com

    ReplyDelete