How to validate form in jQuery using jQuery Form Validator

onlinecode

2 years ago

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 :

maxWords
minWords
rangeWords
letterswithbasicpunc
alphanumeric
lettersonly
nowhitespace
ziprange
zipcodeUS
integer
vinUS
dateITA
dateNL
time
time12h
phoneUS
phoneUK
mobileUK
phonesUK
postcodeUK
strippedminlength
email2(optional TLD)
url2(optional TLD)
creditcardtypes
ipv4
ipv6
pattern
require_from_group
skip_or_fill_minimum
accept
extension

maxWordsminWordsrangeWordsletterswithbasicpuncalphanumericlettersonlynowhitespaceziprangezipcodeUSintegervinUSdateITAdateNLtimetime12hphoneUSphoneUKmobileUKphonesUKpostcodeUKstrippedminlengthemail2 (optional TLD)url2 (optional TLD)creditcardtypesipv4ipv6patternrequire_from_groupskip_or_fill_minimumacceptextension

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

 {!! Form::open(array('route' => 'your_route','method'=>'POST','files'=>true,'id'=>'myform')) !!}
<divclass="col-xs-12 col-sm-12 col-md-12">
<divclass="form-group">
<strong>Name:</strong>
                {!! Form::text('name', null, array('placeholder' => 'Name','class' => 'form-control')) !!}
</div>
</div>
<divclass="col-xs-12 col-sm-12 col-md-12">
<divclass="form-group">
<strong>Email:</strong>
                {!! Form::text('email', null, array('placeholder' => 'Email','class' => 'form-control')) !!}
</div>
</div>
<divclass="col-xs-12 col-sm-12 col-md-12">
<divclass="form-group">
<strong>Phone:</strong>
                {!! Form::text('phone', null, array('placeholder' => 'Mobile No','class' => 'form-control')) !!}
</div>
</div>
<divclass="col-xs-12 col-sm-12 col-md-12">
<divclass="form-group">
<strong>Details:</strong>
                {!! Form::textarea('details', null, array('placeholder' => 'Details','class' => 'form-control','style'=>'height:100px')) !!}
</div>
</div>
<divclass="col-xs-12 col-sm-12 col-md-12 text-center">
<buttontype="submit"class="btn btn-primary">Submit</button>
</div>
    {!! 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.

<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>

<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

Label :

Laravel PHP Framework

jQuery

JavaScript

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