formVery.js is a simple jQuery plugin that validates html forms. It is very simple to use and very lightweight. The .formVery() function returns a boolean value. It is suggested to test against this boolean value in the "success" function of the .formVery() call.
// #send is the form's submit button
// #contactForm is the form itself
$("#send").on('click',function(e){
//prevent form from being submitted before validation
e.preventDefault();
$("#contactForm").formVery({
errorClass: 'error',
addMoneySign: true,
dateStyle: 'mm/dd/yyyy',
dateSplitter: '/',
success: function(valid){
//if successful
if(valid){
//perform success function here
} else {
//perform error function here
}
}
});
});
<form id="contactForm">
Name:<br>
<input type="text" name="userName" id="userName" class="formVery" default-data="" /><br><br>
Email:<br>
<input type="text" name="userEmail" id="userEmail" class="formVery formEmail" value="Email Address" default-data="Email Address" /><br><br>
<input type="submit" id="send" value="Send" />
</form>
- Add formVery.js and the jQuery library to your page
- Add the class name "formVery" to all inputs you want to verify, or not allow null values
- Add the "default-data" attribute and set it to the default value of that input (default-data="" if input is empty)
- - Optional - Add additional class names (listed below in table) for special validations
Class Name | Validation Type |
---|---|
formVery | Makes sure input is not empty |
formNumeric | Numbers Only |
formMoney | Styles input like money |
formDate | Numerical Dates Only |
formEmail | Email Address Only |
formCreditCard | Credit Card Numbers Only |