"Registration form"
Bootstrap 3.1.0 Snippet by pareshnr

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container"> <div class="row centered-form"> <div class="col-xs-12 col-sm-8 col-md-4 col-sm-offset-2 col-md-offset-4"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Registration Form</h3> </div> <div class="panel-body"> <form role="form"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <input type="text" name="first_name" id="first_name" class="form-control input-sm" placeholder="First Name" required> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <input type="text" name="last_name" id="last_name" class="form-control input-sm" placeholder="Last Name" required> </div> </div> </div> <div class="form-group"> <input type="email" name="email" id="email" class="form-control input-sm" placeholder="Email Address" required> </div> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <input type="password" name="password" id="password" class="form-control input-sm" placeholder="Password" required> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <input type="password" name="password_confirmation" id="password_confirmation" class="form-control input-sm" placeholder="Confirm Password" required> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <input type="text" name="business_name" id="business_name" class="form-control input-sm" placeholder="Business Name" required> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <textarea rows="2" placeholder="Business description" name="business_desc" id="business_desc" class="form-control input-sm"></textarea> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <textarea rows="2" class="form-control input-sm" name="address" id="address" placeholder="Address" required></textarea> </div> </div> </div> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <input type="text" name="city" id="city" class="form-control input-sm" placeholder="City" required> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <input type="text" name="pincode" id="pincode" class="form-control input-sm" placeholder="Pin code" required> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <input type="checkbox" name="global" id="global" checked> Copy global service parameters </div> </div> </div> <input type="submit" value="Register" class="btn btn-info btn-block" onsubmit="return checkForm(this);"> </form> </div> </div> </div> </div> </div>
body{ background-color: #ffffff; } .centered-form{ margin-top: 60px; } .centered-form .panel{ background: rgba(255, 255, 255, 0.8); }
<script type="text/javascript"> function checkForm(form) { re = /^\w+$/; if(!re.test(form.first_name.value)) { alert("Error: First Name must contain only letters, numbers and underscores!"); form.first_name.focus(); return false; } re = /^\w+$/; if(!re.test(form.last_name.value)) { alert("Error: Second name must contain only letters, numbers and underscores!"); form.last_name.focus(); return false; } if(form.password.value != "" && form.password.value == form.password_confirmation.value) { if(form.password.value.length < 8) { alert("Error: Password must contain at least 8 characters!"); form.password.focus(); return false; } if(form.password.value == form.first_name.value) { alert("Error: Password must be different from First name!"); form.password.focus(); return false; } re = /[0-9]/; if(!re.test(form.password.value)) { alert("Error: password must contain at least one number (0-9)!"); form.password.focus(); return false; } re = /[a-z]/; if(!re.test(form.password.value)) { alert("Error: password must contain at least one lowercase letter (a-z)!"); form.password.focus(); return false; } re = /[A-Z]/; if(!re.test(form.password.value)) { alert("Error: password must contain at least one uppercase letter (A-Z)!"); form.password.focus(); return false; } } else { alert("Error: Please check that you've entered and confirmed your password!"); form.password.focus(); return false; } return true; } </script>

Related: See More


Questions / Comments: