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. so let's start code.
Read also : Parsley Form Validation Example
Read also : HTML5 Form Validation Example
Read also : Server Side Form Validation Example using PHP
Looking for Login, Sign Up & Forgot Password Modal Forms using Bootstrap ? I have covered it here
- Adding jQuery Validations into BootStrap Form.
- How to Add Custom Rules into jQuery Validation.
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>
now let's create all the necessary inputs for the signup form and here is our complete html form body markup,
form design looks like :
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 .
now calling the custom validation method if user input goes wrong
form with validation :
now after filling all the correct details our responsive form will looks like this :
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.
Read also : Parsley Form Validation Example
Read also : HTML5 Form Validation Example
Read also : Server Side Form Validation Example using PHP
Looking for Login, Sign Up & Forgot Password Modal Forms using Bootstrap ? I have covered it here
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 :
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 :
now after filling all the correct details our responsive form will looks like this :
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.
Good work
ReplyDeletethank you, Sabari, Glad you liked it :)
Deletethanks man
ReplyDeleteMy man you are good. Your tutorial has thought me so much. God bless you bountifully.
ReplyDeletethanks bro for detailed explanation , along with above sign-up form how do we add social signups (facebook/twitter..etc)..
ReplyDeleteGood work. At least I could implement it on my
ReplyDeleteweb design site which was needed indeed!
Hello, great work ! I am looking to open this form like a model box through a link. (link How can it be done ?
ReplyDelete