神刀安全网

Designing Bootstrap Signup Form with jQuery Validation

In this tutorial i am going to show how to create a simple responsive signup form using bootstrap . bootstrap is awesome css/js designing front end framework and i love to work with bootstrap and in most of my web projects i have used bootstrap for designing purpose. so here In this tutorial there’s a simple bootstrap registration form with jQuery validation . you can take a look at live demo. have a look.

Designing Bootstrap Signup Form with jQuery Validation

Download Script

Starts with Bootstrap

I have used bootstrap version 3.3.6, download it from the official site

ok, after downloading files just put it within documents <head> tag, just like this :

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap Form with jQuery Validations</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css" /> </head>

We will See :

– Creating a Responsive Bootstrap Signup Form.

– Adding jQuery Validations into BootStrap Form.

– How to Add Custom Rules into jQuery Validation.

Bootstrap Part : Signup Form

here is our form Simple HTML Markup

<body>      <div class="container">      <div class="signup-form-container">               <!-- form start -->          <form role="form" id="register-form" autocomplete="off">                    <div class="form-header">          <!-- form header -->                 </div>                    <div class="form-body">                                      <!-- form body will be here, input controls -->                                       </div>                       <div class="form-footer">             <!-- form footer, let say for submit button -->          </div>           </form>                  </div>      </div>  </body>

now let see how to add input controls with glyphicon for better look. input control should be within form-group div, to add glyphicon into input box make another div with class="input-group" then just below the input group make another div with class="input-group-addon" now add the suitable glyphicon into addon group div like this <span class="glyphicon glyphicon-user"></span>

<div class="form-group">      <div class="input-group">      <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>      <input name="name" type="text" class="form-control" placeholder="Username">      </div>      <span class="help-block" id="error"></span> </div>

now let’s create all the necessary inputs for the signup form and here is our complete html form body markup,

<body>   <div class="container">      <div class="signup-form-container">               <!-- form start -->          <form role="form" id="register-form" autocomplete="off">                    <div class="form-header">           <h3 class="form-title"><i class="fa fa-user"></i> Sign Up</h3>                                 <div class="pull-right">              <h3 class="form-title"><span class="glyphicon glyphicon-pencil"></span></h3>          </div>                                 </div>                    <div class="form-body">                                    <div class="form-group">                    <div class="input-group">                    <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>                    <input name="name" type="text" class="form-control" placeholder="Username">                    </div>                    <span class="help-block" id="error"></span>               </div>                                        <div class="form-group">                    <div class="input-group">                    <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>                    <input name="email" type="text" class="form-control" placeholder="Email">                    </div>                     <span class="help-block" id="error"></span>                                    </div>                                        <div class="row">                                             <div class="form-group col-lg-6">                         <div class="input-group">                         <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>                         <input name="password" id="password" type="password" class="form-control" placeholder="Password">                         </div>                           <span class="help-block" id="error"></span>                                        </div>                                                 <div class="form-group col-lg-6">                         <div class="input-group">                         <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>                         <input name="cpassword" type="password" class="form-control" placeholder="Retype Password">                         </div>                           <span class="help-block" id="error"></span>                                        </div>                                           </div>                                                               </div>                          <div class="form-footer">                  <button type="submit" class="btn btn-info">                  <span class="glyphicon glyphicon-log-in"></span> Sign Me Up !                  </button>             </div>               </form>                         </div>   </div>       </body>

form design looks like :

Designing Bootstrap Signup Form with jQuery Validation

jQuery Part : Validation

ok guys after creating signup form now it’s time to complete it with jQuery validations, for that we need jquery plugin jquery.validate.min.js you can get it from the official site and a simpel jquery library jquery-1.11.2.min.js , so we have two js files to get work done. put the both file just above the closing </body> tag

<script src="bootstrap/js/bootstrap.min.js"></script> <script src="assets/jquery-1.11.2.min.js"></script> <script src="assets/jquery.validate.min.js"></script> <!-- javascript/jquery validations will be here  -->  </body> </html>

create a new file as an register.js and copy/paste the following code inside the file, i have added all the input validations in this file .

// JavaScript Validation For Registration Page  $('document').ready(function() {        // name validation     var nameregex = /^[a-zA-Z ]+$/;        $.validator.addMethod("validname", function( value, element ) {        return this.optional( element ) || nameregex.test( value );    });         // valid email pattern    var eregex = /^([a-zA-Z0-9_/./-/+])+/@(([a-zA-Z0-9/-])+/.)+([a-zA-Z0-9]{2,4})+$/;        $.validator.addMethod("validemail", function( value, element ) {        return this.optional( element ) || eregex.test( value );    });        $("#register-form").validate({           rules:     {     name: {      required: true,      validname: true,      minlength: 4     },     email: {      required: true,      validemail: true     },     password: {      required: true,      minlength: 8,      maxlength: 15     },     cpassword: {      required: true,      equalTo: '#password'     },      },      messages:      {     name: {      required: "Please Enter User Name",      validname: "Name must contain only alphabets and space",      minlength: "Your Name is Too Short"        },        email: {        required: "Please Enter Email Address",        validemail: "Enter Valid Email Address"         },     password:{      required: "Please Enter Password",      minlength: "Password at least have 8 characters"      },     cpassword:{      required: "Please Retype your Password",      equalTo: "Password Did not Match !"      }      },      errorPlacement : function(error, element) {      $(element).closest('.form-group').find('.help-block').html(error.html());      },      highlight : function(element) {      $(element).closest('.form-group').removeClass('has-success').addClass('has-error');      },      unhighlight: function(element, errorClass, validClass) {      $(element).closest('.form-group').removeClass('has-error').addClass('has-success');      $(element).closest('.form-group').find('.help-block').html('');      },            submitHandler: function(form) {                     form.submit();      alert('ok');                 }      });   })

How to Add Custom Validation Method in jQuery Validation

// name validation var nameregex = /^[a-zA-Z ]+$/;  $.validator.addMethod("validname", function( value, element ) {      return this.optional( element ) || nameregex.test( value ); });      // valid email pattern var eregex = /^([a-zA-Z0-9_/./-/+])+/@(([a-zA-Z0-9/-])+/.)+([a-zA-Z0-9]{2,4})+$/;     $.validator.addMethod("validemail", function( value, element ) {      return this.optional( element ) || eregex.test( value ); });

now calling the custom validation method if user input goes wrong

  // rules  name: {       required: true,       validname: true // rule for accepts only alphabets with space       }, email: {       required: true,       validemail: true // rule for accepts valid email pattern       }  // messages : user defined messages for the custom rules.  name: {       required: "Please Enter User Name",       validname: "Name must contain only alphabets and space"       }, email: {       required: "Please Enter Email Address",       validemail: "Enter Valid Email Address"       }

form with validation :

Designing Bootstrap Signup Form with jQuery Validation

now after filling all the correct details our responsive form will looks like this :

Designing Bootstrap Signup Form with jQuery Validation

that’s it, hope you guys like this. please share it with your dev friends. in the next we will see the same form with ajax registration. keep visiting.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Designing Bootstrap Signup Form with jQuery Validation

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址