How to validate form in jQuery using jQuery Form Validator

How to validate form in jQuery using jQuery Form Validator

In this post we will give you information about How to validate form in jQuery using jQuery Form Validator. Hear we will give you detail about How to validate form in jQuery using jQuery Form ValidatorAnd how to use it also give you demo for it if it is necessary.

How to validate form in jQuery using jQuery Form Validator

There are multiple jquery plugins to validate forms but i am going to tell you how to validate a simple form in jquery, even though this plugins have so many attribute option rules to validate form such as :

  1. maxWords
  2. minWords
  3. rangeWords
  4. letterswithbasicpunc
  5. alphanumeric
  6. lettersonly
  7. nowhitespace
  8. ziprange
  9. zipcodeUS
  10. integer
  11. vinUS
  12. dateITA
  13. dateNL
  14. time
  15. time12h
  16. phoneUS
  17. phoneUK
  18. mobileUK
  19. phonesUK
  20. postcodeUK
  21. strippedminlength
  22. email2(optional TLD)
  23. url2(optional TLD)
  24. creditcardtypes
  25. ipv4
  26. ipv6
  27. pattern
  28. require_from_group
  29. skip_or_fill_minimum
  30. accept
  31. extension
maxWordsminWordsrangeWordsletterswithbasicpuncalphanumericlettersonlynowhitespaceziprangezipcodeUSintegervinUSdateITAdateNLtimetime12hphoneUSphoneUKmobileUKphonesUKpostcodeUKstrippedminlengthemail2 (optional TLD)url2 (optional TLD)creditcardtypesipv4ipv6patternrequire_from_groupskip_or_fill_minimumacceptextension

Here is a simple form which i will validate using jQuery.

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

Now include this script before closing body tag.

  1. <script src="//js/jquery.validate.min.js"></script>
  2. <script>
  3. $(document).ready(function(){
  4. $('#myform').validate({// initialize the plugin
  5. rules:{
  6. name:{
  7. required:true
  8. },
  9. email:{
  10. required:true,
  11. email:true
  12. },
  13. phone:{
  14. required:true
  15. },
  16. details:{
  17. required:true
  18. }
  19. }
  20. });
  21. });
  22. </script>
<script src="//js/jquery.validate.min.js"></script><script>        $(document).ready(function () {    $('#myform').validate({ // initialize the plugin        rules: {            name: {                required: true            },            email: {                required: true,                email: true            },            phone: {                required: true            },            details: {                required: true            }        }    });});</script>

Now you can validate your form using jQuery. Click here to see the example to validate form using jQuery.

Show Demo

Hope this code and post will helped you for implement How to validate form in jQuery using jQuery Form Validator. 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

See also  Random Row Query in laravel - onlinecode

Leave a Comment

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

27  +    =  35

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