form-core.js

zapatec suite 最新版 20070204,非常棒的ajax widgets 工具包

	// Submit form
	Zapatec.Transport.fetch({
		url: strUrl,
		method: strMethod,
		contentType: strEncoding,
		content: strContent,
		onLoad: function(objText){
			if(self.config.ajaxDebugFunc){
				self.config.ajaxDebugFunc(self.getMessage('ajaxDebugResponse', objText.responseText));
			}

			if(self.config.disableButtonsWhenAsyncSubmit){
				self.processing = false;

				// enabling all <input type="submit"> element in the form
				self.toggleSubmits(false);
			}

			if (objText.responseText == null) {
				Zapatec.Log({description: self.getMessage('ajaxSubmitNoResponseError', objText.responseText)});
				return null;
			}

			var objResponse = Zapatec.Transport.parseJson({strJson: objText.responseText});

			if(objResponse == null){
				Zapatec.Log({description: self.getMessage('ajaxSubmitCantParseError', objText.responseText)});
				return null;
			}

			return self.processAsyncResponse(objResponse);
		},
		onError: function(objError) {
			if(self.config.disableButtonsWhenAsyncSubmit){
				self.processing = false;

				// enabling all <input type="submit"> element in the form
				self.toggleSubmits(false);
			}

			var strError = '';

			if (objError.errorCode) {
				strError = objError.errorCode + ' ';
			}

			strError += objError.errorDescription;

			if(self.config.ajaxDebugFunc){
				self.config.ajaxDebugFunc(self.getMessage('ajaxDebugResponseError', strError));
			}

			if(
				self.config.showErrorsOnSubmit &&
				typeof(self.config.submitErrorFunc) == 'function'
			){
				self.config.submitErrorFunc({
					serverSide: true,
					generalError: strError
				});
			}
		}
	});

	return false;
};

Zapatec.Form.prototype.processAsyncResponse = function(objResponse){
	if(this.config.disableButtonsWhenAsyncSubmit){
		this.processing = false;

		// enabling all <input type="submit"> element in the form
		this.toggleSubmits(false);
	}

	if(this.config.busyConfig){
		Zapatec.Transport.removeBusy(this.config.busyConfig);
	}

	if (objResponse){
		if (objResponse.success) {
			// Success
			this.config.asyncSubmitFunc(objResponse.callbackArgs);
		} else if (this.config.showErrorsOnSubmit) {
			// Error
			// Array with error messages
			var arrFieldErrors = [];

			// Flag to indicate that focus is already set
			var boolFocusSet = false;

			// Go through errors received from the server
			if (objResponse.fieldErrors){
				for (var strFieldName in objResponse.fieldErrors) {
					// Find corresponding form field
					for (var iElm = 0; iElm < this.container.elements.length; iElm++) {
						var objField = this.container.elements[iElm];

						if (objField.name && objField.name == strFieldName) {
							// Add error message to the array
							arrFieldErrors.push({
								field: objField,
								errorMessage: objResponse.fieldErrors[strFieldName],
								validator: ''
							});

							// Set icon and status
							if(objField.zpFormField != null){
								objField.zpFormField.setImageStatus(objResponse.fieldErrors[strFieldName]);
							}

							// Field is found
							break;
						}
					}
				}
			}

			if (typeof(this.config.submitErrorFunc) == 'function') {
				this.config.submitErrorFunc({
					serverSide: true,
					generalError: objResponse.generalError || '',
					fieldErrors: arrFieldErrors
				});
			}
		}
	} else if(
		this.config.showErrorsOnSubmit &&
		typeof(this.config.submitErrorFunc) == 'function'
	){
		// No response
		this.config.submitErrorFunc({
			serverSide: true,
			generalError: this.getMessage('ajaxSubmitNoResponseError')
		});
	}
};

/**
 * Turn on/off submit buttons into form. 
 * @private
 * @param disable {boolean} If true - disable all submits in a form. Otherwise - enable
 */
Zapatec.Form.prototype.toggleSubmits = function(disable){
	var inputs = this.container.getElementsByTagName("input");

	for(var ii = 0; ii < inputs.length; ii++){
		if(inputs[ii].type == "submit"){
			inputs[ii].disabled = disable == true;
		}
	}
};

/**
 * Reset handler for form. It is called _after_ resetting form.
 * @private
 */
Zapatec.Form.prototype.reset = function(ev){
	for(var ii = 0; ii < this.container.elements.length; ii++){
		var field = this.container.elements[ii].zpFormField;

		if(field != null){
			field.setValueFromField();

			field.firstRun = true;

			field.blur();
		}
	}

	if(!ev){
		ev = window.event;
	}

	this.fireEvent("reset", ev);
	this.fireEvent("all", ev, "reset");
};

/**
 * @private
 * This function is called on form submit. If config.showErrorsOnSubmit
 * is true and config.submitErrorFunc is defined - then they would be called
 * after validation.
 * If there was no errors and config.submitValidFunc was defined - it would be called.
 */
Zapatec.Form.prototype.submit = function(ev){
	var errors = this.validate(false);

	if(
		errors != null &&
		errors.length > 0 &&
		this.config.showErrorsOnSubmit &&
		typeof(this.config.submitErrorFunc) == 'function'
	){
		this.config.submitErrorFunc({
			serverSide: false,
			generalError: errors.length == 1 ? this.getMessage('submitOneError') : this.getMessage('submitManyErrors', errors.length),
			fieldErrors: errors
		});

		try{
			errors[0].field.focus();
		} catch(e){}

		return false;
	}

	// call submitValidFunc callback is validation passed
	if (typeof(this.config.submitValidFunc) == 'function') {
		this.config.submitValidFunc();
	}

	if(!ev){
		ev = window.event;
	}

	this.fireEvent("submit", ev);
	this.fireEvent("all", ev, "submit");

	return true;
};

/**
 * Validate all elements in form.
 * @param onlyValidate {boolean} if true - then no visual marks will be added 
 * to fields. Default value - true. 
 * @return null if validation passed succesfully or return array of errors in 
 * other case.
 * @type object
 */
Zapatec.Form.prototype.validate = function(onlyValidate){
	if(typeof(onlyValidate) == "undefined"){
		onlyValidate = true;
	}

	var valid = true;
	var tabIndex = 1;
	var errors = [];
	
	for (var ii = 0; ii < this.container.elements.length; ii++){
		var el = this.container.elements[ii];

		if(el.zpFormField == null){
			continue;
		}
		
		if(!onlyValidate){
			el.zpFormField.firstRun = false;
		}

		var validate = el.zpFormField.validate(onlyValidate);
		var fieldValid = (validate == null || validate.length == 0);

		if(this.config.putTabIndexesOnError){
			if(fieldValid){
				el.tabIndex = 100 + tabIndex++;
				
				if(!Zapatec.is_ie){
					delete(el.tabIndex);
				}
			} else {
				el.tabIndex = tabIndex;
			}
		}

		if(!fieldValid)	{
			for(var jj = 0; jj < validate.length; jj++){
				errors.push(validate[jj]);
			}
		}

		valid = valid && fieldValid;
	}

	if(errors.length == 0){
		errors = null;
	}

	return errors;
};

/**
 * @private
 * This method is used to process conditional elements into form.
 * @param field {object} reference to element.
 */
Zapatec.Form.prototype.initConditionalField = function(field){
	var md = null;

	if(
		field.className &&
		(md = field.className.match(/zpForm(Display|Visible)When=([^\s]+)/))
	){
		var func = eval(md[2]);

		if(typeof(func) != "function"){
			return null;
		}

		var handler = null;

		var self = this;
		
		if(md[1] == 'Display'){
			handler = function(){
				var tmp = func();

				Zapatec.Form.Utils.toggleFormElements(field, tmp, false);

				if(field.zpFormField){
					Zapatec.Form.Utils.toggleFormElements(field.zpFormField.errorText, tmp, false);
					Zapatec.Form.Utils.toggleFormElements(field.zpFormField.requiredMark, tmp, false);
				}

				if(field.zpMultipleButton){
					Zapatec.Form.Utils.toggleFormElements(field.zpFormField.requiredMark, tmp, false);
				}

				if(self.config.strict){
					self.toggleSubmits(self.validate() != null);
				}
			};
		} else if(md[1] == 'Visible'){
			handler = function(){
				var tmp = func();

				Zapatec.Form.Utils.toggleFormElements(field, tmp, true);

				if(field.zpFormField){
					Zapatec.Form.Utils.toggleFormElements(field.zpFormField.errorText, tmp, true);
					Zapatec.Form.Utils.toggleFormElements(field.zpFormField.requiredMark, tmp, true);
				}

				if(field.zpMultipleButton){
					Zapatec.Form.Utils.toggleFormElements(field.zpFormField.requiredMark, tmp, true);
				}
				
				if(self.config.strict){
					self.toggleSubmits(self.validate() != null);
				}
			};
		}

		handler();

		var eventTypes = this.config.conditionalEvents;

		if(
			!eventTypes || 
			eventTypes.length == 0
		){
			eventTypes = ["all"];
		}

		for(var ii = 0; ii < eventTypes.length; ii++){
			this.addEventListener(eventTypes[ii], handler);
		}
	}
};

/**
 * Allows to add function, that would be called when any form element changes its value.
 * This method is deprecated - use form eventListeners instead of.
 * @deprecated
 * @param func {function} reference to function
 * @param eventType {string or array} When to call this conditional handler. Can be single string or 
 */
Zapatec.Form.prototype.addEvent = Zapatec.Form.prototype.addChangeHandler = function(func, eventTypes){
	if(typeof(func) == 'string'){
		func = eval(func);
	}

	if(typeof(func) != 'function'){
		return false;
	}

	if(!eventTypes || eventTypes.length == 0){
		eventTypes = ["all"];
	}

	if(typeof(eventTypes) == 'string'){
		eventTypes = [eventTypes];
	}

	for(var ii = 0; ii < eventTypes.length; ii++){
		this.addEventListener(eventTypes[ii], func);
	}
	
	func(null, "addEvent");

	if(this.config.strict){
		this.toggleSubmits(this.validate() != null);
	}

	return true;
};

/**
 * @private
 * @deprecated
 * Runs all changeHandlers for this form. This is stub for all changeHandlers functionality
 */
Zapatec.Form.prototype.runChangeHandlers = function(){
	this.fireEvent("all", null, "runChangeHandlers");
};

/**
 * @private
 * When window is loaded - validate all fields in the form and run change 
 *	handlers
 */
Zapatec.Form.prototype.formLoaded = function(){
	// if window loaded - run immediatly
	for(var ii = 0; ii<this.container.elements.length; ii++){
		var zpField = this.container.elements[ii].zpFormField;

		if(zpField != null){
			zpField.setValueFromField(true);
		}
	}

	this.fireEvent("formLoaded");
	this.fireEvent("all", null, "formLoaded");
};

Zapatec.Form.prototype.destroy = function(){
	for(var ii = 0; ii < this.container.elements.length; ii++){
		var field = this.container.elements[ii];
	
		if(field.zpFormField){
			field.zpFormField.destroy();
		}
	}
	
	this.discard();
};

/**
* Setup function that auto-activates all forms, which has classNames, that
* starts from "zpForm".
* Accepts same params as Zapatec.Form constructor(except 'form' parameter).
* If no 'theme' parameter was given - it would retrieve it from form className.
*/
Zapatec.Form.setupAll = function(params) {
	var forms = document.getElementsByTagName('form');

	if(!params){
		params = {};
	}
	
	if(!params.startupFocusPosition){
		params.startupFocusPosition = null;
	}

	if(forms && forms.length){
		for(var ff = forms.length - 1; ff >= 0; ff--){
			if(forms[ff].zpForm){
				// if form is already initialized - do nothing
				continue;
			}
			
			var arrMatch = forms[ff].className.match(/zpForm(\S*)/);

			if(arrMatch){
				// Get theme name
				var strThemeName = arrMatch[1];

				// Duplicate configuration object
				var objConfig = Zapatec.Utils.clone(params);

				// Modify configuration
				if (
					(objConfig.theme == null || objConfig.theme == "") &&
					strThemeName
				){
					objConfig.theme = strThemeName;
				}

				objConfig.form = forms[ff];

				new Zapatec.Form(objConfig);
			}
		}
	}
};

/**
 * @private
 * Default function for displaying validation errors.
 * @param objErrors {object} Errors object of following structure:
 *	{
 *		serverSide: true if this is server response or false if validation
 *		result [boolean],
 *		generalError: "Human readable error description" [string],
 *		fieldErrors: [
 *			{
 *				field: field element object [object],
 *				errorMessage: "Human readable error description" [string]
 *			},
 *			...
 *		]
 *	}
 *	fieldErrors property may be undefined.
 */
Zapatec.Form.submitErrorFunc = function(objErrors){
	var message = objErrors.generalError + '\n';

	if (objErrors.fieldErrors && objErrors.fieldErrors.length) {
		for (var ii = 0; ii < objErrors.fieldErrors.length; ii++) {
			message += (ii + 1) + ': Field ' + objErrors.fieldErrors[ii].field.name +
				' ' + objErrors.fieldErrors[ii].errorMessage + "\n";
		}

		message = message.substr(0 ,message.length - 1);
	}

	alert(message);
};

// class to mark element as interal element of Zapatec.Form(needed for cloning elements)
Zapatec.Form.IGNORE_CLASSNAME = "zpFormInternalEl";