Most of the time we need to validate the user inputs before submitting the form value to the server side script. It will help to collect required information from users. We are using bootstrap form validation using bootstrap validator jQuery plugin.
Using bootstrap validator jQuery plugin we can able to validate input and required information format. The bootstrap validator is simple and very useful to validate the text value, numeric, zipcode, radio buttons, checkbox and list values with a basic script. It has rule and corresponding messages to help user can enter valid details.
Include required jQuery files,
|
1 2 3 |
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'></script> |
Make bootstrap form for validation,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<form class="form-horizontal" id="validateForm"> <div class="row"> <div class="col-md-offset-1 col-md-4"> <div class="form-group"> <label class="control-label">Full Name:</label> <input name="full_name" placeholder="Full Name" class="form-control" type="text"> </div> <div class="form-group"> <label class="control-label">Phone No.:</label> <input name="phone" placeholder="Phone No" class="form-control" type="text"> </div> <div class="form-group"> <label class="control-label">Address:</label> <textarea class="form-control" name="address" placeholder="Address..."></textarea> </div> <div class="form-group"> <label>Gender</label> <div class="radio"> <label><input type="radio" name="gender" value="male" /> Male</label> </div> <div class="radio"> <label><input type="radio" name="gender" value="female" /> Female</label> </div> </div> </div> <div class="col-md-offset-1 col-md-4"> <div class="form-group"> <label class="control-label">E-Mail:</label> <input name="email" placeholder="E-Mail" class="form-control" type="text"> </div> <div class="form-group has-feedback"> <label for="password" class="control-label">Password</label> <input class="form-control" id="userPw" type="password" placeholder="password" name="password" /> </div> <div class="form-group has-feedback"> <label for="confirmPassword" class="control-label"> Confirm Password </label> <input class="form-control" id="userPw2" type="password" placeholder="Confirm password" name="confirmPassword" /> </div> <div class="form-group"> <label class="control-label">Role:</label> <select name="role" class="form-control" > <option value=" " >Please select role</option> <option>Admin</option> <option>User</option> </select> </div> <div class="form-group"> <label>Language Known:</label> <div class="checkbox"> <label><input type="checkbox" name="lang_known[]" value="E" /> English</label> </div> <div class="checkbox"> <label><input type="checkbox" name="lang_known[]" value="T" /> Tamil</label> </div> <div class="checkbox"> <label><input type="checkbox" name="lang_known[]" value="O" /> Other</label> </div> </div> <div class="form-group"> <button type="submit" class="btn btn-success" >Submit</button> </div> </div> </div> </form> |
Add Bootstrap Validator function with form id,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
$('#validateForm').bootstrapValidator({ feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { full_name: { validators: { stringLength: { min: 5, message: 'Please Enter your Full name with minimum 5 letters length' }, notEmpty: { message: 'Please Enter your Full name' } } }, phone: { validators: { numeric: { message: 'The phone no must be a number' }, notEmpty: { message: 'Please Enter your phone number' } } }, address: { validators: { stringLength: { min: 15, max: 100, message:'Please enter at least 15 characters and no more than 100' }, notEmpty: { message: 'Please Enter Address' } } }, gender: { validators: { notEmpty: { message: 'The gender option is required' } } }, email: { validators: { notEmpty: { message: 'Please Enter your email address' }, emailAddress: { message: 'Please Enter a valid email address' } } }, password: { validators: { notEmpty: { message: 'Enter your profile password' } } }, confirmPassword: { validators: { notEmpty: { message: 'Enter confirm your profile password' }, identical: { field: 'password', message: 'Enter the password, what enter in password field' } } }, 'lang_known[]': { validators: { notEmpty: { message: 'The Language Known is required' } } }, role: { validators: { notEmpty: { message: 'Choose your user role' } } }, } }); |
