A alternative to jquery validate plugin
var $Form = $('#exampleForm');
var rules = {
name: { type: 'text' },
email: { type: 'email' }
};
var FormInstance = new Form($Form, rules);
FormInstance.validate();
Wait! there's more :)
You can set custom error message like this -
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();
}
});
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 -
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();
}
});
You might want show error somewhere else for a field. You can do it easily. See below -
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();
}
});
Yes, its possible you can set global error turn off and show error in another place. See how it can be done -
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>');
});
}
});
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 -
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();
}
});
<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' }
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();
}
});