Powerful jQuery Bootstrap Form Validation with Example

Leave a Comment / php / By

Powerful jQuery Bootstrap Form Validation with Example

In this post we will give you information about Powerful jQuery Bootstrap Form Validation with Example. Hear we will give you detail about Powerful jQuery Bootstrap Form Validation with ExampleAnd how to use it also give you demo for it if it is necessary.

Powerful jQuery Bootstrap Form Validation with Example

Here is another example to validate your bootstrap form using jquery. This is very simple and user friendly plugins to validate your bootstrap form with additional features.

Using this plugin you can validate form easily.

This will shows you error icon and success icon too.

Here is a sample form to validate via jquery bootstrap validator.

  1.  {!! Form::open(array('route' => 'your route','method'=>'POST','files'=>true,'id'=>'myform')) !!}
  3. <divclass="col-xs-12 col-sm-12 col-md-12">
  4. <divclass="form-group">
  5. <strong>Name:</strong>
  6.                 {!! Form::text('name', null, array('placeholder' => 'Name','class' => 'form-control')) !!}
  7.                  {!! $errors->first('name', '<pclass="alert alert-danger">:message</p>') !!}
  8. </div>
  9. </div>
  10. <divclass="col-xs-12 col-sm-12 col-md-12">
  11. <divclass="form-group">
  12. <strong>Email:</strong>
  13.                 {!! Form::text('email', null, array('placeholder' => 'Email','class' => 'form-control')) !!}
  14.                  {!! $errors->first('email', '<pclass="alert alert-danger">:message</p>') !!}
  15. </div>
  16. </div>
  17. <divclass="col-xs-12 col-sm-12 col-md-12">
  18. <divclass="form-group">
  19. <strong>Phone:</strong>
  20.                 {!! Form::text('phone', null, array('placeholder' => 'Mobile No','class' => 'form-control')) !!}
  21.                  {!! $errors->first('phone', '<pclass="alert alert-danger">:message</p>') !!}
  22. </div>
  23. </div>
  24. <divclass="col-xs-12 col-sm-12 col-md-12">
  25. <divclass="form-group">
  26. <strong>Details:</strong>
  27.                 {!! Form::textarea('details', null, array('placeholder' => 'Details','class' => 'form-control','style'=>'height:100px')) !!}
  28.                  {!! $errors->first('details', '<pclass="alert alert-danger">:message</p>') !!}
  29. </div>
  30. </div>
  32. <divclass="col-xs-12 col-sm-12 col-md-12 text-center">
  33. <buttontype="submit"class="btn btn-primary">Submit</button>
  34. </div>
  37.     {!! Form::close() !!}
 {!! Form::open(array('route' => 'your route','method'=>'POST','files'=>true,'id'=>'myform')) !!}             <div >            <div >                <strong>Name:</strong>                {!! Form::text('name', null, array('placeholder' => 'Name','class' => 'form-control')) !!}                 {!! $errors->first('name', '<p >:message</p>') !!}            </div>        </div>         <div >            <div >                <strong>Email:</strong>                {!! Form::text('email', null, array('placeholder' => 'Email','class' => 'form-control')) !!}                 {!! $errors->first('email', '<p >:message</p>') !!}            </div>        </div>       <div >            <div >                <strong>Phone:</strong>                {!! Form::text('phone', null, array('placeholder' => 'Mobile No','class' => 'form-control')) !!}                 {!! $errors->first('phone', '<p >:message</p>') !!}            </div>        </div>        <div >            <div >                <strong>Details:</strong>                {!! Form::textarea('details', null, array('placeholder' => 'Details','class' => 'form-control','style'=>'height:100px')) !!}                 {!! $errors->first('details', '<p >:message</p>') !!}            </div>        </div>        <div >                <button type="submit" >Submit</button>        </div>      {!! Form::close() !!}

Now lets add some scipt to validate this form.

  1. $(document).ready(function(){
  2.     $('#myform').bootstrapValidator({
  3.         message:'This value is not valid',
  4.         feedbackIcons:{
  5.             valid:'glyphicon glyphicon-ok',
  6.             invalid:'glyphicon glyphicon-remove',
  7.             validating:'glyphicon glyphicon-refresh'
  8. },
  9.         fields:{
  10.             name:{
  11.                 validators:{
  12.                     notEmpty:{
  13.                         message:'Please enter your full name'
  14. }
  15. }
  16. },
  17.             details:{
  18.                 validators:{
  19.                     notEmpty:{
  20.                         message:'Please enter your details'
  21. }
  22. }
  23. },
  26.             email:{
  27.                 validators:{
  28.                     notEmpty:{
  29.                         message:'Please enter your email'
  30. }, emailAddress:{
  31.                         message:'The value is not a valid email address'
  32. }
  33. }
  34. },
  35.             phone:{
  37.                 validators:{
  39.                 notEmpty:{
  40.                         message:'Please enter your phone no.'
  41. },
  42.                 digits:{
  43.                         message:'The mobile phone number is not valid'
  44. },
  45.                     stringLength:{
  46.                         min:10,
  47.                         max:11,
  48.                         message:'The phone no. must be 10 digits'
  49. }
  50. }
  51. },
  54. }
  56. });
  57. });
$(document).ready(function() {      $('#myform').bootstrapValidator({        message: 'This value is not valid',        feedbackIcons: {            valid: 'glyphicon glyphicon-ok',            invalid: 'glyphicon glyphicon-remove',            validating: 'glyphicon glyphicon-refresh'        },        fields: {            name: {                validators: {                    notEmpty: {                        message: 'Please enter your full name'                    }                }            },            details: {                validators: {                    notEmpty: {                        message: 'Please enter your details'                    }                }            },                                  email: {                validators: {                    notEmpty: {                        message: 'Please enter your email'                    }, emailAddress: {                        message: 'The value is not a valid email address'                    }                }            },               phone: {                        validators: {                          notEmpty: {                        message: 'Please enter your phone no.'                    },                digits: {                        message: 'The mobile phone number is not valid'                    },                    stringLength: {                        min: 10,                         max: 11,                         message: 'The phone no. must be 10 digits'                    }                }            },                           }            });  });

Don’t forget to add library to validate form.

<script src="//js/validator.js"></script>

Show Demo

Hope this code and post will helped you for implement Powerful jQuery Bootstrap Form Validation with Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

8  +  1  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US