"Registration with Jquery validation"
Bootstrap 3.2.0 Snippet by ishwarkatwe

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Validate Plugin --> <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> <div class="row"> <div class="col-md-6"> </div> <div class="col-md-6"> <form class="form-horizontal" id="register" name="register"> <fieldset> <!-- Form Name --> <h3 align="center">Registration with form Validation</h3> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="firstname">First Name</label> <div class="col-md-6"> <input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="lastname">Last Name</label> <div class="col-md-6"> <input id="lastname" name="lastname" type="text" placeholder="Last Name" class="form-control input-md"> </div> </div> <!-- Password input--> <div class="form-group"> <label class="col-md-4 control-label" for="password">Password</label> <div class="col-md-6"> <input id="password" name="password" type="password" placeholder="Password" class="form-control input-md"> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="submit"></label> <div class="col-md-8"> <button id="submit" name="submit" class="btn btn-success">Register</button> <button id="reset" name="reset" type="reset" class="btn btn-danger">Reset</button> </div> </div> </fieldset> </form> </div> </div>
label.valid { width: 24px; height: 24px; background: url(assets/img/valid.png) center center no-repeat; display: inline-block; text-indent: -9999px; } label.error { font-weight: bold; color: rgba(255, 21, 21, 0.91); padding: 0px 14px; margin-top: -1px; position: absolute; } body { background-color: cornflowerblue; } * { color:#FFF; font-family: inherit; } .form-control { display: block; width: 100%; height: 38px; padding: 0px 14px; font-size: 14px; line-height: 1.428571; color: #FFF; background-color: rgba(255, 255, 255, 0); background-image: none; border: 1px solid rgba(255, 244, 244, 0.58); border-radius: 9px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; margin: 3px; } /* all */ ::-webkit-input-placeholder { color:#f00; } ::-moz-placeholder { color:#f00; } /* firefox 19+ */ :-ms-input-placeholder { color:#f00; } /* ie */ input:-moz-placeholder { color:#f00; }
$(document).ready(function(){ $('#register').validate( { rules: { firstname: { minlength: 2, required: true }, lastname: { required: true }, password: { minlength: 2, required: true } }, messages: { firstname: "Please enter your first name", lastname: "Please enter your last name", password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" } }, highlight: function(element) { $(element).closest('.form-group').removeClass('success').addClass('error'); }, success: function(element) { element .text('OK!').addClass('valid') .closest('.form-group').removeClass('error').addClass('success'); } }); }); // end document.ready

Related: See More


Questions / Comments: