- SPLessons

Jquery form validation

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Jquery form validation

Jquery form validation 

Description :

You want validate form before submitting with jquery its very simple and faster. You can validate your form simply using ‘Jqeuryvalidate.js’,it is a Jquery plugin(opensource).

Follow the below steps to validate the form.

 

Step1 :

Add the below scripts and styles in your project.

  1. bootstrap.min.css
  2. jquery-1.9.1.min.js
  3. jquery.validate.js

Step2 :

Create a file named ‘index.html’ and add below content in that page.

Form Validation script


<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"   />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">

	  $(document).ready(function(){
		  $.validator.addMethod('notNone', function(value, element) {
				return (value != '0');
			}, 'Please select an option.');

			$(".form-horizontal").validate({
				rules:{
						 f_name:"required",
						 l_name:"required",
						 sex:"required",
						 email:{ required: true,
								  email:true
									   },
						 date: "notNone",
						 month: "notNone",
						 year: "notNone",
						 password: {
							     required:true,
								 minlength:6
						 },
						 confirm_password: {
							  required:true,
							  equalTo: "#password"
						 }
				},
				messages:{
						f_name:"Please enter first Name",
						l_name:"Please enter last name",
						sex:"Please select sex",
						email:"Please enter email",
						date:"Please select date",
						month:"Please select month",
						year:"Please select year",
						password: {
						       required:"Please enter email",
							   minlength:"Passord should be minimum 6 characters"
						},
						confirm_password:"Passowrd should match"
					},

				errorClass: "help-inline",
				errorElement: "span",
				highlight:function(element, errorClass, validClass) {
					$(element).parents('.control-group').addClass('error');
				},

				unhighlight: function(element, errorClass, validClass) {
					$(element).parents('.control-group').removeClass('error');
					$(element).parents('.control-group').addClass('success');
				}
             });
        });
</script>

Add below content in ‘index.html’ in page body to create a form


<div style="margin:10%;" >
<h4 style="margin-left:15%;" >Jquery Validate Form Demo</h4>

  <form class="form-horizontal" id="myform"  style="margin-top:10px;" action="your_action.php" method="post">

 		<div class="control-group">
           <label class="control-label" for="First Name"> Fisrt Name<font color="#FF0000">*</font></label>
            <div class="controls">
              <input type="text" name="f_name" id="f_name" />

           </div>
         </div>

         <div class="control-group">
           <label class="control-label" for="Last Name"> Last Name<font color="#FF0000">*</font></label>
            <div class="controls">
              <input type="text" name="l_name" id="l_name" />
           </div>
         </div>

          <div class="control-group">
                <label class="control-label" for="Sex">Sex<font color="#FF0000">*</font></label>

                <div class="controls">
                <label class="radio">
                <input type="radio" id="sex" name="sex"
                class="board_exam_type" value="0" attr1="1" />Male
                 </label>
                 <label class="radio">
                <input type="radio" id="sex" name="sex"
                class="board_exam_type" value="1" attr1="2"/>Female
                 </label>
                </div>

                </div>

        <div class="control-group">
           <label class="control-label" for="Date of Birth"> Date of Birth<font color="#FF0000">*</font></label>
            <div class="controls">
            <select name="date" id="date" class="input-small">
              <option value="0">Select</option>
              <option value="01">01</option>
              <option value="02">02</option>

              </select>

            <select name="month" id="month" class="input-small">
              <option value="0">Select</option>
              <option value="01">01</option>
              <option value="02">02</option>

             </select>         

              <select name="year" id="year" class="input-small">
              <option value="0">Select</option>
              <option value="1980">1980</option>

              <option value="2004">2004</option>

              </select>
           </div>
         </div>

       <div class="control-group">
           <label class="control-label" for="Email"> Email<font color="#FF0000">*</font></label>
            <div class="controls">
              <input type="email" name="email" id="email" />
           </div>
         </div>

 		<div class="control-group">
           <label class="control-label" for="Passowrd"> Passowrd<font color="#FF0000">*</font></label>
            <div class="controls">
              <input type="password" name="password" id="password" />
           </div>
         </div>

      <div class="control-group">
           <label class="control-label" for="Confirm Passowrd">Confirm Passowrd<font color="#FF0000">*</font></label>
            <div class="controls">
              <input type="password" name="confirm_password" id="confirm_password" />
           </div>
         </div>

          <div class="control-group">
           <div class="controls">
              <button type="submit" id="submit"class="btn btn-danger"> Save </button>
              <button type="reset" class="btn">Reset</button>

            </div>
          </div>
     </form>

</div>

Open the ‘index.html’ in any browser and trying to submit your form, you will get validation on form.