An oValidationConf global object to set up the inputs, validation types and messages
In this prototype all alert messages appear in a shared div altogether, not separately following the input fields.
To add in more elements for validation, you need to add the class in the HTML itself and do the config in the oValidationConf
You can apply more than one validation method on one input field.
You can have multiple forms in the page and define all of the configs together.
form and element names are reserved for backend, We only define necessary fields by id and classnames. Frontend and Backend are independent.
a callback function is called after all validations are done. You can choose to submit the form or do something else with it.
fallback: it does a lot of dom access while initializing. I wish there's a better way to it.
global config object on page
oValidationConf = {
'someform': [
{'tag':'input','class':'js-name','validate':'empty','err':'Please fill in your name.'},
{'tag':'input','class':'js-email','validate':'email','err':'Please check your email format.'},
{'tag':'input','class':'js-url','validate':'url','err':'Please fill in a correct web url.'},
{'tag':'input','class':'js-title','validate':'empty','err':'Please fill in the title.'},
{'tag':'input','class':'js-title','validate':'max','limit':'27','err':'Please Limit your title to less than 54 characters.'},
{'tag':'textarea','class':'js-post','validate':'empty','err':'Please fill in the content'},
{'tag':'textarea','class':'js-post','validate':'max','limit':'2000','err':'Please limit your content to less than 40000 characters.'},
{'tag':'input','class':'js-sign','validate':'empty','err':'You have have content when you choose to attach signature.'},
{'tag':'input','class':'js-sign','validate':'max','limit':'20', 'err':'Please limit your signature to less than 40 characters.'}
],
'otherform': [
{'tag':'input', 'class':'js-key', 'validate':'empty', 'err':'Please enter keyword.'},
{'tag':'input', 'class':'js-item', 'validate':'num', 'err':'Please fill in the numbers correctly.'},
{'tag':'div', 'class':'js-cal', 'validate':'selectGroup', 'err':'Please choose the date range.'},
{'tag':'div', 'class':'js-type', 'validate':'radioGroup', 'err':'Please choose one of the search type.'},
{'tag':'div', 'class':'js-lang', 'validate':'checkboxGroup', 'err':'Please choose at least one language.'}
]
};
tag
the tag of the element, could be input, textarea, or even div, span!
class
the class of the element. We will use YAHOO.util.Dom.getElementsByClassName to get the elements
validate
validation mehtod to use, currenly available: "empty","max","number","email","url", you can add your own in the code too!
err
The alert message to display.
limit
when you use "max" as a validation method, you get this extra field to put in the limit.
prototype config
var formValidate = new YAHOO.asia.ui.formValidation({'fid':'someform','globalConf':oValidationConf});