Extends Form.Validator to add inline messages.
Form.Validator.Inline = new Class({
Extends: Form.Validator,
options: {
showError: function(errorElement){
if (errorElement.reveal) errorElement.reveal();
else errorElement.setStyle('display', 'block');
},
hideError: function(errorElement){
if (errorElement.dissolve) errorElement.dissolve();
else errorElement.setStyle('display', 'none');
},
scrollToErrorsOnSubmit: true,
scrollFxOptions: {
transition: 'quad:out',
offset: {
y: -20
}
}
},
initialize: function(form, options){
this.parent(form, options);
this.addEvent('onElementValidate', function(isValid, field, className, warn){
var validator = this.getValidator(className);
if (!isValid && validator.getError(field)){
if (warn) field.addClass('warning');
var advice = this.makeAdvice(className, field, validator.getError(field), warn);
this.insertAdvice(advice, field);
this.showAdvice(className, field);
} else {
this.hideAdvice(className, field);
}
});
},
makeAdvice: function(className, field, error, warn){
var errorMsg = (warn) ? this.warningPrefix : this.errorPrefix;
errorMsg += (this.options.useTitles) ? field.title || error:error;
var cssClass = (warn) ? 'warning-advice' : 'validation-advice';
var advice = this.getAdvice(className, field);
if (advice){
advice = advice.set('html', errorMsg);
} else {
advice = new Element('div', {
html: errorMsg,
styles: { display: 'none' },
id: 'advice-' + className + '-' + this.getFieldId(field)
}).addClass(cssClass);
}
field.store('$moo:advice-' + className, advice);
return advice;
},
getFieldId : function(field){
return field.id ? field.id : field.id = 'input_' + field.name;
},
showAdvice: function(className, field){
var advice = this.getAdvice(className, field);
if (advice && !field.retrieve('$moo:' + this.getPropName(className))
&& (advice.getStyle('display') == 'none'
|| advice.getStyle('visiblity') == 'hidden'
|| advice.getStyle('opacity') == 0)){
field.store('$moo:' + this.getPropName(className), true);
this.options.showError(advice);
this.fireEvent('showAdvice', [field, advice, className]);
}
},
hideAdvice: function(className, field){
var advice = this.getAdvice(className, field);
if (advice && field.retrieve('$moo:' + this.getPropName(className))){
field.store('$moo:' + this.getPropName(className), false);
this.options.hideError(advice);
this.fireEvent('hideAdvice', [field, advice, className]);
}
},
getPropName: function(className){
return 'advice' + className;
},
resetField: function(field){
field = document.id(field);
if (!field) return this;
this.parent(field);
field.className.split(' ').each(function(className){
this.hideAdvice(className, field);
}, this);
return this;
},
getAllAdviceMessages: function(field, force){
var advice = [];
if (field.hasClass('ignoreValidation') && !force) return advice;
var validators = field.className.split(' ').some(function(cn){
var warner = cn.test('^warn-') || field.hasClass('warnOnly');
if (warner) cn = cn.replace(/^warn-/, '');
var validator = this.getValidator(cn);
if (!validator) return;
advice.push({
message: validator.getError(field),
warnOnly: warner,
passed: validator.test(),
validator: validator
});
}, this);
return advice;
},
getAdvice: function(className, field){
return field.retrieve('$moo:advice-' + className);
},
insertAdvice: function(advice, field){
Check for error position prop
var props = field.get('validatorProps');
Build advice
if (!props.msgPos || !document.id(props.msgPos)){
if (field.type.toLowerCase() == 'radio') field.getParent().adopt(advice);
else advice.inject(document.id(field), 'after');
} else {
document.id(props.msgPos).grab(advice);
}
},
validateField: function(field, force){
var result = this.parent(field, force);
if (this.options.scrollToErrorsOnSubmit && !result){
var failed = document.id(this).getElement('.validation-failed');
var par = document.id(this).getParent();
while (par != document.body && par.getScrollSize().y == par.getSize().y){
par = par.getParent();
}
var fx = par.retrieve('$moo:fvScroller');
if (!fx && window.Fx && Fx.Scroll){
fx = new Fx.Scroll(par, this.options.scrollFxOptions);
par.store('$moo:fvScroller', fx);
}
if (failed){
if (fx) fx.toElement(failed);
else par.scrollTo(par.getScroll().x, failed.getPosition(par).y - 20);
}
}
return result;
}
});