Form validation using jQuery - very lightweight

A alternative to jquery validate plugin

Download JS Download full demo

Basic Usage:

var $Form = $('#exampleForm'); var rules = { name: { type: 'text' }, email: { type: 'email' } }; var FormInstance = new Form($Form, rules); FormInstance.validate();

Demo:

checkout the console!

Wait! there's more :)


Custom Error message

You can set custom error message like this -

checkout the console!

Source

var $Form = $('#exampleForm2'); var rules = { name2: { type: 'text', errMsg: 'Enter your name' }, email2: { type: 'email', errMsg: 'Enter valid email' } }; var FormInstanceTwo = new Form($Form, rules); FormInstanceTwo.validate(function(form){ console.log(form); if( form.isValid ) { alert("Form is validate!"); //form.submit(); } });

Custom method for indivisual rules

You can set custom rules for your field. Say for example, you want to username need to be at least 5 char long. How you will do that? see below -


checkout the console!

Source

function checkusername(obj){ if( $('#'+obj.id).val().length >= 5 ) return true; else return false; } var $Form = $('#exampleForm3'); var rules = { name3: { type: 'text', errMsg: 'Enter your name' }, email3: { type: 'email', errMsg: 'Enter valid email' }, username: { type: 'text', errMsg: 'Username need to be 5 char long!', customMethod: checkusername } }; var FormInstanceThree = new Form($Form, rules); FormInstanceThree.validate(function(form){ console.log(form); if( form.isValid ) { alert("Form is validate!"); //form.submit(); } });

Error in custom place

You might want show error somewhere else for a field. You can do it easily. See below -


this p tag has class showCustomError

If error found in email field it will show here!



checkout the console!

Source

function customError(obj){ if( obj.isValidField === false ) { $('.showCustomError').html(obj.field.errMsg); } } var $Form = $('#exampleForm4'); var rules = { name4: { type: 'text', errMsg: 'Enter your name' }, email4: { type: 'email', errMsg: 'Enter valid email', errReplace: customError } }; var FormInstanceFour = new Form($Form, rules); FormInstanceFour.validate(function(form){ console.log(form); if( form.isValid ) { alert("Form is validate!"); //form.submit(); } });

All error in another place

Yes, its possible you can set global error turn off and show error in another place. See how it can be done -


this p tag has class error-container

All error will be here!



checkout the console!

Source

var $Form = $('#exampleForm5'); var rules = { name4: { type: 'text', errMsg: 'Enter your name' }, email4: { type: 'email', errMsg: 'Enter valid email' } }; var FormInstanceFive = new Form($Form, rules, true); FormInstanceFive.validate(function(form){ console.log(form); if( form.isValid ) { alert("Form is validate!"); //form.submit(); } else if( form.err.length > 0 ) { $('.error-container').html(''); $.each(form.err, function(index, field) { $('.error-container').append(field.errMsg+'<br>'); }); } });

Error if another field set to ?

Sometimes we do need validation which is related to another field. Say for example, we have asked user to give passport number. If user selects that user has passport number then user must need to fill passport field else no need to check for validation. Example -


Yes No
checkout the console!

Source:

Syntax - require: { name: 'field_id', value: 'field_expected_value' } var $Form = $('#exampleForm6'); var rules = { name6: { type: 'text' }, passport: { type: 'text', inputType: 'radio' }, // inputType: 'radio' is MUST if you are trigger radio input and its triggering input name instead of ID passport_number: { type: 'text', require: { name: 'passport', value: 'yes' } } }; var FormInstanceSix = new Form($Form, rules); FormInstanceSix.validate(function(form){ console.log(form); if( form.isValid ) { alert("Form is validate!"); //form.submit(); } });

What if you have array inputs? like -

<input type="text" name="questions[]"> <input type="text" name="questions[]">

Then do just following -

<div id="questions"> <input type="text" name="questions[]"> <input type="text" name="questions[]"> </div>

And rules should be like this -

questions : { type: 'array' }

Demo

Good? why? Bad? why? Avg? why?
I agree with the terms and conditions
Juice Fried rice Spicy food
checkout the console!

Source code:

var $Form = $('#exampleForm7'); var rules = { name7: { type: 'text' }, feedback: { type: 'array' }, like: { type: 'array', inputType: 'checkbox' }, agree: { type: 'text', inputType: 'checkbox' } }; var FormInstanceSeven = new Form($Form, rules); FormInstanceSeven.validate(function(form){ console.log(form); if( form.isValid ) { alert("Form is validate!"); //form.submit(); } });
comments powered by Disqus