YUI : custom validation
HTML
<script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>
<form id='validateContainer' hidden >
</form>
<form class="formValidator">
<div class="span7 control-group">
<input name='errorMessageAnchor' hidden></input>
<label class="control-label" id="">Date of birth:</label><br/>
<input class="span3" type="text" placeholder="DD" name="_mine_WAR_portlet_dd" />
<input class="span3 field-digits" type="text" maxlength="2" placeholder="MM" name="_mine_WAR_portlet_mm" />
<input class="span5 field-digits" type="text" maxlength="4" placeholder="YYYY" name="_mine_WAR_portlet_yyyy" />
</div>
<button class='btn' type='button'>Submit</button>
<form>
JavaScript
// AUI Form validator for CSS Class
YUI().use('aui-form-validator', function (Y) {
var args = {
_mine_WAR_portlet_dd: {
required: true,
digits: true,
maxLength: 2,
range: [1, 31]
},
_mine_WAR_portlet_mm: {
required: true,
digits: true,
maxLength: 2,
range: [1, 12]
},
_mine_WAR_portlet_yyyy: {
required: true,
digits: true,
maxLength: 4,
range: [1900, 2014]
},
};
var validator = new Y.FormValidator(
{
boundingBox: '.formValidator',
rules: {errorMessageAnchor:{custom:true, dobError:args}}
});
var CONFIG = Y.config.FormValidator;
Y.mix(CONFIG.RULES, {dobError: function(val, fieldNode, args) {
var fields = Object.keys(args)
for(f in fields){
var name = fields[f];
var field = args[name]
var rules = Object.keys(field)
var node = Y.one('input[name="'+name+'"]')
for(r in rules){
var rule = rules[r]
var ruleVal = args[fields[f]][rule]
var result = CONFIG.RULES[rule](node.get('value'), node, ruleVal)
//console.log(fields[f] + " : " + rule + " : " + result)
if(!result){
var errorMessage = CONFIG.STRINGS[rule]
//errorMessage would be the default error message used for the rule. Some token substitution would be required.
validator.set('strings', {dobError: 'This is where a custom message could be added'})
return false;
}
}
}
return true
}});
Y.one('.btn').on('click', function(){validator.validate()})
});