/*
Class: FormCheck
Performs different tests on forms and indicates errors.
Usage:
Works with these types of fields :
- input (text, radio, checkbox)
- textarea
- select
You just need to add a specific class to each fields you want to check.
For example, if you add the class
(code)
validate['required','length[4, -1]','differs[email]','digit']
(end code)
the value's field must be set (required) with a minimum length of four chars (4, -1),
must differs of the input named email (differs[email]), and must be digit.
You can perform check during the datas entry or on the submit action, shows errors as tips or in a div before or after the field,
show errors one by one or all together, show a list of all errors at the top of the form, localize error messages, add new regex check, ...
The layout is design only with css. Now I added a hack to use transparent png with IE6, so you can use png images in formcheck.css (works only for theme, so the file must be named formcheck.css). It can also works with multiple forms on a single html page.
The class supports now internationalization. To use it, simply specify a new .
If you add the class
(code)
validate['submit']
(end code)
to an element like an anchor (or anything else), this element will act as a submit button.
N.B. : you must load the language script before the formcheck and this method overpass the old way. You can create new languages following existing ones. You can otherwise still specifiy the alerts' strings when you initialize the Class, with options.
If you don't use a language script, the alert will be displayed in english.
Test type:
You can perform various test on fields by addind them to the validate class. Be careful to *not use space chars*. Here is the list of them.
required - The field becomes required. This is a regex, you can change it with class options.
alpha - The value is restricted to alphabetic chars. This is a regex, you can change it with class options.
alphanum - The value is restricted to alphanumeric characters only. This is a regex, you can change it with class options.
nodigit - The field doesn't accept digit chars. This is a regex, you can change it with class options.
digit - The value is restricted to digit (no floating point number) chars, you can pass two arguments (f.e. digit[21,65]) to limit the number between them. Use -1 as second argument to not set a maximum.
number - The value is restricted to number, including floating point number. This is a regex, you can change it with class options.
email - The value is restricted to valid email. This is a regex, you can change it with class options.
phone - The value is restricted to phone chars. This is a regex, you can change it with class options.
url: - The value is restricted to url. This is a regex, you can change it with class options.
confirm - The value has to be the same as the one passed in argument. f.e. confirm[password].
differs - The value has to be diferent as the one passed in argument. f.e. differs[user].
length - The value length is restricted by argument (f.e. length[6,10]). Use -1 as second argument to not set a maximum.
You can also use a custom function to check a field. For example, if you have a field with class
(code)
validate['required','%customCheck']
(end code)
the function customCheck(el) will be called to validate the field. '%customcheck' works with other validate(s) together, and '~customcheck' works if the element pass the other validate(s).
Here is an example of what customCheck could look :
(code)
function customCheck(el){
if (!el.value.test(/^[A-Z]/)) {
el.errors.push("Username should begin with an uppercase letter");
return false;
} else {
return true;
}
}
(end code)
It is now possible to register new fields after a new FormCheck call by using (see too).
Parameters:
When you initialize the class with addEvent, you can set some options. If you want to modify regex, you must do it in a hash, like for display or alert. You can also add new regex check method by adding the regex and an alert with the same name.
Required:
form_id - The id of the formular. This is required.
Optional:
submitByAjax - you can set this to true if you want to submit your form with ajax. You should use provided events to handle the ajax request (see below). By default it is false.
ajaxResponseDiv - id of element to inject ajax response into (can also use onAjaxSuccess). By default it is false.
ajaxEvalScripts - use evalScripts in the Request response. Can be true or false, by default it is false.
onAjaxRequest - Function to fire when the Request event starts.
onAjaxSuccess - Function to fire when the Request receives . Args: response [the request response] - see Mootools docs for Request.onSuccess.
onAjaxFailure - Function to fire if the Request fails.
tipsClass - The class to apply to tipboxes' errors. By default it is 'fc-tbx'.
errorClass - The class to apply to alertbox (not tips). By default it is 'fc-error'.
fieldErrorClass - The class to apply to fields with errors, except for radios. You should also turn on options.addClassErrorToField. By default it is 'fc-field-error'
trimValue - If set to true, strip whitespace (or other characters) from the beginning and end of values. By default it is false.
validateDisabled - If set to true, disabled input will be validated too, otherwise not.
Display:
This is a hash of display settings. in here you can modify.
showErrors - 0 : onSubmit, 1 : onSubmit & onBlur, by default it is 1.
titlesInsteadNames - 0 : When you do a check using differs or confirm, it takes the field name for the alert. If it's set to 1, it will use the title instead of the name.
errorsLocation - 1 : tips, 2 : before, 3 : after, by default it is 1.
indicateErrors - 0 : none, 1 : one by one, 2 : all, by default it is 1.
indicateErrorsInit - 0 : determine if the form must be checked on initialize. Could be usefull to force the user to update fields that don't validate.
keepFocusOnError - 0 : normal behaviour, 1 : the current field keep the focus as it remain errors. By default it is 0.
checkValueIfEmpty - 0 : When you leave a field and you have set the showErrors option to 1, the value is tested only if a value has been set. 1 : The value is tested in any case. By default it is 1.
addClassErrorToField - 0 : no class is added to the field, 1 : the options.fieldErrorClass is added to the field with an error (except for radio). By default it is 0.
fixPngForIe - 0 : do nothing, 1 : fix png alpha for IE6 in formcheck.css. By default it is 1.
replaceTipsEffect - 0 : No effect on tips replace when we resize the broswer, 1: tween transition on browser resize;
closeTipsButton - 0 : the close button of the tipbox is hidden, 1 : the close button of the tipbox is visible. By default it is 1.
flashTips - 0 : normal behaviour, 1 : the tipbox "flash" (disappear and reappear) if errors remain when the form is submitted. By default it is 0.
tipsPosition - 'right' : the tips box is placed on the right part of the field, 'left' to place it on the left part. By default it is 'right'.
tipsOffsetX - Horizontal position of the tips box (margin-left), , by default it is 100 (px).
tipsOffsetY - Vertical position of the tips box (margin-bottom), , by default it is -10 (px).
listErrorsAtTop - List all errors at the top of the form, , by default it is false.
scrollToFirst - Smooth scroll the page to first error and focus on it, by default it is true.
fadeDuration - Transition duration (in ms), by default it is 300.
Alerts:
This is a hash of alerts settings. in here you can modify strings to localize or wathever else. %0 and %1 represent the argument.
required - "This field is required."
alpha - "This field accepts alphabetic characters only."
alphanum - "This field accepts alphanumeric characters only."
nodigit - "No digits are accepted."
digit - "Please enter a valid integer."
digitmin - "The number must be at least %0"
digitltd - "The value must be between %0 and %1"
number - "Please enter a valid number."
email - "Please enter a valid email:
E.g. yourname@domain.com"
phone - "Please enter a valid phone."
url - "Please enter a valid url:
E.g. http://www.domain.com"
confirm - "This field is different from %0"
differs - "This value must be different of %0"
length_str - "The length is incorrect, it must be between %0 and %1"
length_fix - "The length is incorrect, it must be exactly %0 characters"
lengthmax - "The length is incorrect, it must be at max %0"
lengthmin - "The length is incorrect, it must be at least %0"
checkbox - "Please check the box"
radios - "Please select a radio"
select - "Please choose a value"
Example:
You can initialize a formcheck (no scroll, custom classes and alert) by adding for example this in your html head this code :
(code)
(end code)
About:
formcheck.js v.1.4.2 for mootools v1.2 - 12 / 2008
by Floor SA (http://www.floor.ch) MIT-style license
Created by Luca Pillonel, last modified by Luca Pillonel
Credits:
This class was inspired by fValidator by Fabio Zendhi Nagao (http://zend.lojcomm.com.br)
Thanks to oneZ, Blots, huughelmink, chdeliens, and everyone who contribute to this project...
*/
var FormCheck = new Class({
Implements: [Options, Events],
options : {
tipsClass: 'fc-tbx', //tips error class
errorClass: 'fc-error', //div error class
fieldErrorClass: 'fc-field-error', //error class for elements
trimValue : false, //trim (remove whitespaces before and after) the value
validateDisabled : false, //skip validation on disabled input if set to false.
submitByAjax : false, //false : standard submit way, true : submit by ajax
ajaxResponseDiv : false, //element to inject ajax response into (can also use onAjaxSuccess) [cronix]
ajaxEvalScripts : false, //use evalScripts in the Request response [cronix]
onAjaxRequest : $empty, //Function to fire when the Request event starts
onAjaxSuccess : $empty, //Function to fire when the Request receives . Args: response [the request response] - see Mootools docs for Request.onSuccess
onAjaxFailure : $empty, //Function to fire if the Request fails
display : {
showErrors : 0,
titlesInsteadNames : 0,
errorsLocation : 1,
indicateErrors : 1,
indicateErrorsInit : 0,
keepFocusOnError : 0,
checkValueIfEmpty : 1,
addClassErrorToField : 0,
fixPngForIe : 1,
replaceTipsEffect : 1,
flashTips : 0,
closeTipsButton : 1,
tipsPosition : "right",
tipsOffsetX : -45,
tipsOffsetY : 0,
listErrorsAtTop : false,
scrollToFirst : true,
fadeDuration : 300
},
alerts : {
required: "This field is required.",
alpha: "This field accepts alphabetic characters only.",
alphanum: "This field accepts alphanumeric characters only.",
nodigit: "No digits are accepted.",
digit: "Please enter a valid integer.",
digitltd: "The value must be between %0 and %1",
number: "Please enter a valid number.",
email: "Please enter a valid email.",
phone: "Please enter a valid phone.",
url: "Please enter a valid url.",
confirm: "This field is different from %0",
differs: "This value must be different of %0",
length_str: "The length is incorrect, it must be between %0 and %1",
length_fix: "The length is incorrect, it must be exactly %0 characters",
lengthmax: "The length is incorrect, it must be at max %0",
lengthmin: "The length is incorrect, it must be at least %0",
checkbox: "Please check the box",
radios: "Please select a radio",
select: "Please choose a value"
},
regexp : {
required : /[^.*]/,
alpha : /^[a-z ._-]+$/i,
alphanum : /^[a-z0-9 ._-]+$/i,
digit : /^[-+]?[0-9]+$/,
nodigit : /^[^0-9]+$/,
number : /^[-+]?\d*\.?\d+$/,
email : /^[a-z0-9._%-]+@[a-z0-9.-]+\.[a-z]{2,4}$/i,
phone : /^[\d\s ().-]+$/,
url : /^(http|https|ftp)\:\/\/[a-z0-9\-\.]+\.[a-z]{2,3}(:[a-z0-9]*)?\/?([a-z0-9\-\._\?\,\'\/\\\+&%\$#\=~])*$/i
}
},
/*
Constructor: initialize
Constructor
Add event on formular and perform some stuff, you now, like settings, ...
*/
initialize : function(form, options) {
if (this.form = $(form)) {
this.form.isValid = true;
this.regex = ['length'];
this.setOptions(options);
//internalization
if (typeof(formcheckLanguage) != 'undefined') this.options.alerts = $merge(this.options.alerts, formcheckLanguage);
this.validations = [];
this.alreadyIndicated = false;
this.firstError = false;
var regex = new Hash(this.options.regexp);
regex.each(function(el, key) {
this.regex.push(key);
}, this);
this.form.getElements("*[class*=validate]").each(function(el) {
this.register(el);
}, this);
this.form.addEvents({
"submit": this.onSubmit.bind(this)
});
if(this.options.display.fixPngForIe) this.fixIeStuffs();
document.addEvent('mousewheel', function(){
this.isScrolling = false;
}.bind(this));
}
},
/*
Function: register
Allows you to declare afterward new fields to the formcheck, to check dynamically loaded fields for example.
Example:
(code)
(end code)
See also:
*/
register : function(el) {
el.validation = [];
el.getProperty("class").split(' ').each(function(classX) {
if(classX.match(/^validate(\[.+\])$/)) {
var validators = eval(classX.match(/^validate(\[.+\])$/)[1]);
for(var i = 0; i < validators.length; i++) {
el.validation.push(validators[i]);
if (validators[i].match(/^confirm\[/)) {
var field = eval(validators[i].match(/^.+(\[.+\])$/)[1].replace(/([A-Z0-9\._-]+)/i, "'$1'"));
if (this.form[field].validation.contains('required')){
el.validation.push('required');
}
}
}
this.addListener(el);
}
}, this);
},
/*
Function: dispose
Allows you to remove a declared field from formCheck
Example:
(code)
(end code)
See also:
*/
dispose : function(element) {
this.validations.erase(element);
},
/*
Function: addListener
Private method
Add listener on fields
*/
addListener : function(el) {
this.validations.push(el);
el.errors = [];
if (this.options.display.indicateErrorsInit) {
this.validations.each(function(el) {
if(!this.manageError(el,'submit')) this.form.isValid = false;
}, this);
return true;
}
if (el.validation[0] == 'submit') {
el.addEvent('click', function(e){
this.onSubmit(e);
}.bind(this));
return true;
}
if (this.isChildType(el) == false) el.addEvent('blur', function() {
(function(){
if(!this.fxRunning && (el.element || this.options.display.showErrors == 1) && (this.options.display.checkValueIfEmpty || el.value))
this.manageError(el, 'blur')
}.bind(this)).delay(100);
}.bind(this))
//We manage errors on radio
else if (this.isChildType(el) == true) {
//We get all radio from the same group and add a blur option
var nlButtonGroup = this.form.getElements('input[name="'+ el.getProperty("name") +'"]');
nlButtonGroup.each(function(radio){
radio.addEvent('blur', function(){
(function(){
if((el.element || this.options.display.showErrors == 1) && (this.options.display.checkValueIfEmpty || el.value)) this.manageError(el, 'click');
}.bind(this)).delay(100);
}.bind(this))
},this);
}
},
/*
Function: validate
Private method
Dispatch check to other methods
*/
validate : function(el) {
el.errors = [];
el.isOk = true;
//skip validation and trim if specified
if (!this.options.validateDisabled && el.get('disabled')) return true;
if (this.options.trimValue && el.value) el.value = el.value.trim();
el.validation.each(function(rule) {
if(this.isChildType(el)) {
if (this.validateGroup(el) == false) {
el.isOk = false;
}
} else {
var ruleArgs = [];
if(rule.match(/^.+\[/)) {
var ruleMethod = rule.split('[')[0];
ruleArgs = eval(rule.match(/^.+(\[.+\])$/)[1].replace(/([A-Z0-9\._-]+)/i, "'$1'"));
} else var ruleMethod = rule;
if (this.regex.contains(ruleMethod) && el.get('tag') != "select") {
if (this.validateRegex(el, ruleMethod, ruleArgs) == false) {
el.isOk = false;
}
}
if (ruleMethod == 'confirm') {
if (this.validateConfirm(el, ruleArgs) == false) {
el.isOk = false;
}
}
if (ruleMethod == 'differs') {
if (this.validateDiffers(el, ruleArgs) == false) {
el.isOk = false;
}
}
if (el.get('tag') == "select" || (el.type == "checkbox" && ruleMethod == 'required')) {
if (this.simpleValidate(el) == false) {
el.isOk = false;
}
}
if(rule.match(/%[A-Z0-9\._-]+$/i) || (el.isOk && rule.match(/~[A-Z0-9\._-]+$/i))) {
if(eval(rule.slice(1)+'(el)') == false) {
el.isOk = false;
}
}
}
}, this);
if (el.isOk) return true;
else return false;
},
/*
Function: simpleValidate
Private method
Perform simple check for select fields and checkboxes
*/
simpleValidate : function(el) {
if (el.get('tag') == 'select' && el.selectedIndex <= 0) {
el.errors.push(this.options.alerts.select);
return false;
} else if (el.type == "checkbox" && el.checked == false) {
el.errors.push(this.options.alerts.checkbox);
return false;
}
return true;
},
/*
Function: validateRegex
Private method
Perform regex validations
*/
validateRegex : function(el, ruleMethod, ruleArgs) {
var msg = "";
if (ruleArgs[1] && ruleMethod == 'length') {
if (ruleArgs[1] == -1) {
this.options.regexp.length = new RegExp("^[\\s\\S]{"+ ruleArgs[0] +",}$");
msg = this.options.alerts.lengthmin.replace("%0",ruleArgs[0]);
} else if(ruleArgs[0] == ruleArgs[1]) {
this.options.regexp.length = new RegExp("^[\\s\\S]{"+ ruleArgs[0] +"}$");
msg = this.options.alerts.length_fix.replace("%0",ruleArgs[0]);
} else {
this.options.regexp.length = new RegExp("^[\\s\\S]{"+ ruleArgs[0] +","+ ruleArgs[1] +"}$");
msg = this.options.alerts.length_str.replace("%0",ruleArgs[0]).replace("%1",ruleArgs[1]);
}
} else if (ruleArgs[0] && ruleMethod == 'length') {
this.options.regexp.length = new RegExp("^.{0,"+ ruleArgs[0] +"}$");
msg = this.options.alerts.lengthmax.replace("%0",ruleArgs[0]);
} else {
msg = this.options.alerts[ruleMethod];
}
if (ruleArgs[1] && ruleMethod == 'digit') {
var regres = true;
if (!this.options.regexp.digit.test(el.value)) {
el.errors.push(this.options.alerts[ruleMethod]);
regres = false;
}
if (ruleArgs[1] == -1) {
if (el.value >= ruleArgs[0]) var valueres = true; else var valueres = false;
msg = this.options.alerts.digitmin.replace("%0",ruleArgs[0]);
} else {
if (el.value >= ruleArgs[0] && el.value <= ruleArgs[1]) var valueres = true; else var valueres = false;
msg = this.options.alerts.digitltd.replace("%0",ruleArgs[0]).replace("%1",ruleArgs[1]);
}
if (regres == false || valueres == false) {
el.errors.push(msg);
return false;
}
} else if (this.options.regexp[ruleMethod].test(el.value) == false) {
el.errors.push(msg);
return false;
}
return true;
},
/*
Function: validateConfirm
Private method
Perform confirm validations
*/
validateConfirm: function(el,ruleArgs) {
var confirm = ruleArgs[0];
if(el.value != this.form[confirm].value){
if (this.options.display.titlesInsteadNames)
var msg = this.options.alerts.confirm.replace("%0",this.form[confirm].getProperty('title'));
else
var msg = this.options.alerts.confirm.replace("%0",confirm);
el.errors.push(msg);
return false;
}
return true;
},
/*
Function: validateDiffers
Private method
Perform differs validations
*/
validateDiffers: function(el,ruleArgs) {
var differs = ruleArgs[0];
if(el.value == this.form[differs].value){
if (this.options.display.titlesInsteadNames)
var msg = this.options.alerts.differs.replace("%0",this.form[differs].getProperty('title'));
else
var msg = this.options.alerts.differs.replace("%0",differs);
el.errors.push(msg);
return false;
}
return true;
},
/*
Function: isChildType
Private method
Determine if the field is a group of radio or not.
*/
isChildType: function(el) {
return ($defined(el.type) && el.type == 'radio') ? true : false;
},
/*
Function: validateGroup
Private method
Perform radios validations
*/
validateGroup : function(el) {
el.errors = [];
var nlButtonGroup = this.form[el.getProperty("name")];
el.group = nlButtonGroup;
var cbCheckeds = false;
for(var i = 0; i < nlButtonGroup.length; i++) {
if(nlButtonGroup[i].checked) {
cbCheckeds = true;
}
}
if(cbCheckeds == false) {
el.errors.push(this.options.alerts.radios);
return false;
} else {
return true;
}
},
/*
Function: listErrorsAtTop
Private method
Display errors
*/
listErrorsAtTop : function(obj) {
if(!this.form.element) {
this.form.element = new Element('div', {'id' : 'errorlist', 'class' : this.options.errorClass}).injectTop(this.form);
}
if ($type(obj) == 'collection') {
new Element('p').set('html',"" + obj[0].name + " : " + obj[0].errors[0]).injectInside(this.form.element);
} else {
if ((obj.validation.contains('required') && obj.errors.length > 0) || (obj.errors.length > 0 && obj.value && obj.validation.contains('required') == false)) {
obj.errors.each(function(error) {
new Element('p').set('html',"" + obj.name + " : " + error).injectInside(this.form.element);
}, this);
}
}
},
/*
Function: manageError
Private method
Manage display of errors boxes
*/
manageError : function(el, method) {
var isValid = this.validate(el);
if ((!isValid && el.validation.flatten()[0].contains('confirm[')) || (!isValid && el.validation.contains('required')) || (!el.validation.contains('required') && el.value && !isValid)) {
if(this.options.display.listErrorsAtTop == true && method == 'submit')
this.listErrorsAtTop(el, method);
if (this.options.display.indicateErrors == 2 ||this.alreadyIndicated == false || el.name == this.alreadyIndicated.name)
{
if(!this.firstError) this.firstError = el;
this.alreadyIndicated = el;
if (this.options.display.keepFocusOnError && el.name == this.firstError.name) (function(){el.focus()}).delay(20);
this.addError(el);
return false;
}
} else if ((isValid || (!el.validation.contains('required') && !el.value)) && el.element) {
this.removeError(el);
return true;
}
return true;
},
/*
Function: addError
Private method
Add error message
*/
addError : function(obj) {
if(!obj.element && this.options.display.indicateErrors != 0) {
if (this.options.display.errorsLocation == 1) {
var pos = (this.options.display.tipsPosition == 'left') ? obj.getCoordinates().left : obj.getCoordinates().right;
var options = {
'opacity' : 0,
'position' : 'absolute',
'float' : 'left',
'left' : pos + this.options.display.tipsOffsetX
}
obj.element = new Element('div', {'class' : this.options.tipsClass, 'styles' : options}).injectInside(document.body);
this.addPositionEvent(obj);
} else if (this.options.display.errorsLocation == 2){
obj.element = new Element('div', {'class' : this.options.errorClass, 'styles' : {'opacity' : 0}}).injectBefore(obj);
} else if (this.options.display.errorsLocation == 3){
obj.element = new Element('div', {'class' : this.options.errorClass, 'styles' : {'opacity' : 0}});
if ($type(obj.group) == 'object' || $type(obj.group) == 'collection')
obj.element.injectAfter(obj.group[obj.group.length-1]);
else
obj.element.injectAfter(obj);
}
}
if (obj.element && obj.element != true) {
obj.element.empty();
if (this.options.display.errorsLocation == 1) {
var errors = [];
obj.errors.each(function(error) {
errors.push(new Element('p').set('html', error));
});
var tips = this.makeTips(errors).injectInside(obj.element);
if(this.options.display.closeTipsButton) {
tips.getElements('a.close').addEvent('mouseup', function(){
this.removeError(obj);
}.bind(this));
}
obj.element.setStyle('top', obj.getCoordinates().top - tips.getCoordinates().height + this.options.display.tipsOffsetY);
} else {
obj.errors.each(function(error) {
new Element('p').set('html',error).injectInside(obj.element);
});
}
if (!this.options.display.fadeDuration || Browser.Engine.trident && Browser.Engine.version == 5 && this.options.display.errorsLocation < 2) {
obj.element.setStyle('opacity', 1);
} else {
obj.fx = new Fx.Tween(obj.element, {
'duration' : this.options.display.fadeDuration,
'ignore' : true,
'onStart' : function(){
this.fxRunning = true;
}.bind(this),
'onComplete' : function() {
this.fxRunning = false;
if (obj.element && obj.element.getStyle('opacity').toInt() == 0) {
obj.element.destroy();
obj.element = false;
}
}.bind(this)
})
if(obj.element.getStyle('opacity').toInt() != 1) obj.fx.start('opacity', 1);
}
}
if (this.options.display.addClassErrorToField && this.isChildType(obj) == false){
obj.addClass(this.options.fieldErrorClass);
obj.element = obj.element || true;
}
},
/*
Function: addPositionEvent
Update tips position after a browser resize
*/
addPositionEvent : function(obj) {
if(this.options.display.replaceTipsEffect) {
obj.event = function(){
new Fx.Morph(obj.element, {
'duration' : this.options.display.fadeDuration
}).start({
'left':[obj.element.getStyle('left'), obj.getCoordinates().right + this.options.display.tipsOffsetX],
'top':[obj.element.getStyle('top'), obj.getCoordinates().top - obj.element.getCoordinates().height + this.options.display.tipsOffsetY]
});
}.bind(this);
} else {
obj.event = function(){
obj.element.setStyles({
'left':obj.getCoordinates().right + this.options.display.tipsOffsetX,
'top':obj.getCoordinates().top - obj.element.getCoordinates().height + this.options.display.tipsOffsetY
});
}.bind(this)
}
window.addEvent('resize', obj.event);
},
/*
Function: removeError
Private method
Remove the error display
*/
removeError : function(obj) {
this.alreadyIndicated = false;
obj.errors = [];
obj.isOK = true;
window.removeEvent('resize', obj.event);
if (this.options.display.errorsLocation >= 2 && obj.element) {
new Fx.Tween(obj.element, {
'duration': this.options.display.fadeDuration
}).start('height', 0);
}
if (!this.options.display.fadeDuration || Browser.Engine.trident && Browser.Engine.version == 5 && this.options.display.errorsLocation == 1 && obj.element) {
this.fxRunning = true;
obj.element.destroy();
obj.element = false;
(function(){this.fxRunning = false}.bind(this)).delay(200);
} else if (obj.element && obj.element != true) {
obj.fx.start('opacity', 0);
}
if (this.options.display.addClassErrorToField && !this.isChildType(obj))
obj.removeClass(this.options.fieldErrorClass);
},
/*
Function: focusOnError
Private method
Create set the focus to the first field with an error if needed
*/
focusOnError : function (obj) {
if (this.options.display.scrollToFirst && !this.alreadyFocused && !this.isScrolling) {
if (!this.options.display.indicateErrors || !this.options.display.errorsLocation) {
var dest = obj.getCoordinates().top-30;
} else if (this.alreadyIndicated.element) {
switch (this.options.display.errorsLocation){
case 1 :
var dest = obj.element.getCoordinates().top;
break;
case 2 :
var dest = obj.element.getCoordinates().top-30;
break;
case 3 :
var dest = obj.getCoordinates().top-30;
break;
}
this.isScrolling = true;
}
if (window.getScroll.y != dest) {
new Fx.Scroll(window, {
onComplete : function() {
this.isScrolling = false;
obj.focus();
}.bind(this)
}).start(0,dest);
} else {
this.isScrolling = false;
obj.focus();
}
this.alreadyFocused = true;
}
},
/*
Function: fixIeStuffs
Private method
Fix png for IE6
*/
fixIeStuffs : function () {
if (Browser.Engine.trident4) {
//We fix png stuffs
var rpng = new RegExp('url\\(([\.a-zA-Z0-9_/:-]+\.png)\\)');
var search = new RegExp('(.+)formcheck\.css');
for (var i = 0; i < document.styleSheets.length; i++){
if (document.styleSheets[i].href.match(/formcheck\.css$/)) {
var root = document.styleSheets[i].href.replace(search, '$1');
var count = document.styleSheets[i].rules.length;
for (var j = 0; j < count; j++){
var cssstyle = document.styleSheets[i].rules[j].style;
var bgimage = root + cssstyle.backgroundImage.replace(rpng, '$1');
if (bgimage && bgimage.match(/\.png/i)){
var scale = (cssstyle.backgroundRepeat == 'no-repeat') ? 'crop' : 'scale';
cssstyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=\'' + bgimage + '\', sizingMethod=\''+ scale +'\')';
cssstyle.backgroundImage = "none";
}
}
}
}
}
},
/*
Function: makeTips
Private method
Create tips boxes
*/
makeTips : function(txt) {
var table = new Element('table');
table.cellPadding ='0';
table.cellSpacing ='0';
table.border ='0';
var tbody = new Element('tbody').injectInside(table);
var tr1 = new Element('tr').injectInside(tbody);
new Element('td', {'class' : 'tl'}).injectInside(tr1);
new Element('td', {'class' : 't'}).injectInside(tr1);
new Element('td', {'class' : 'tr'}).injectInside(tr1);
var tr2 = new Element('tr').injectInside(tbody);
new Element('td', {'class' : 'l'}).injectInside(tr2);
var cont = new Element('td', {'class' : 'c'}).injectInside(tr2);
var errors = new Element('div', {'class' : 'err'}).injectInside(cont);
txt.each(function(error) {
error.injectInside(errors);
});
if (this.options.display.closeTipsButton) new Element('a',{'class' : 'close'}).injectInside(cont);
new Element('td', {'class' : 'r'}).injectInside(tr2);
var tr3 = new Element('tr').injectInside(tbody);
new Element('td', {'class' : 'bl'}).injectInside(tr3);
new Element('td', {'class' : 'b'}).injectInside(tr3);
new Element('td', {'class' : 'br'}).injectInside(tr3);
return table;
},
/*
Function: reinitialize
Private method
Reinitialize form before submit check
*/
reinitialize: function() {
this.validations.each(function(el) {
if (el.element) {
el.errors = [];
el.isOK = true;
if(this.options.display.flashTips == 1) {
el.element.destroy();
el.element = false;
}
}
}, this);
if (this.form.element) this.form.element.empty();
this.alreadyFocused = false;
this.firstError = false;
this.elementToRemove = this.alreadyIndicated;
this.alreadyIndicated = false;
this.form.isValid = true;
},
/*
Function: submitByAjax
Private method
Send the form by ajax, and replace the form with response
*/
submitByAjax: function() {
var url = this.form.getProperty('action');
this.fireEvent('ajaxRequest');
new Request({
url: url,
method: this.form.getProperty('method'),
data : this.form.toQueryString(),
evalScripts: this.options.ajaxEvalScripts,
onFailure: function(instance){
this.fireEvent('ajaxFailure', instance);
}.bind(this),
onSuccess: function(result){
this.fireEvent('ajaxSuccess', result);
if(this.options.ajaxResponseDiv) $(this.options.ajaxResponseDiv).set('html',result);
}.bind(this)
}).send();
},
/*
Function: onSubmit
Private method
Perform check on submit action
*/
onSubmit: function(event) {
this.reinitialize();
this.validations.each(function(el) {
var validation = this.manageError(el,'submit');
if(!validation) this.form.isValid = false;
}, this);
if (this.form.isValid) {
if (this.options.submitByAjax) {
new Event(event).stop();
this.submitByAjax();
}
} else {
new Event(event).stop();
if (this.elementToRemove && this.elementToRemove != this.firstError && this.options.display.indicateErrors == 1) {
this.removeError(this.elementToRemove);
}
this.focusOnError(this.firstError)
}
}
});