yii.activeForm.js 12.2 KB
Newer Older
Qiang Xue committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
/**
 * Yii form widget.
 *
 * This is the JavaScript widget used by the yii\widgets\ActiveForm widget.
 *
 * @link http://www.yiiframework.com/
 * @copyright Copyright (c) 2008 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
(function ($) {
	
	$.fn.yiiActiveForm = function (method) {
		if (methods[method]) {
			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
		} else if (typeof method === 'object' || !method) {
			return methods.init.apply(this, arguments);
		} else {
			$.error('Method ' + method + ' does not exist on jQuery.yiiActiveForm');
			return false;
		}
	};

	var defaults = {
Qiang Xue committed
26 27
		// the jQuery selector for the error summary
		errorSummary: undefined,
Qiang Xue committed
28 29
		// whether to perform validation before submitting the form.
		validateOnSubmit: true,
30 31 32
		// the container CSS class representing the corresponding attribute has validation error
		errorCssClass: 'error',
		// the container CSS class representing the corresponding attribute passes validation
33
		successCssClass: 'success',
34 35
		// the container CSS class representing the corresponding attribute is being validated
		validatingCssClass: 'validating',
Qiang Xue committed
36 37
		// the URL for performing AJAX-based validation. If not set, it will use the the form's action
		validationUrl: undefined,
Qiang Xue committed
38 39 40 41 42
		// a callback that is called before submitting the form. The signature of the callback should be:
		// function ($form) { ...return false to cancel submission...}
		beforeSubmit: undefined,
		// a callback that is called before validating each attribute. The signature of the callback should be:
		// function ($form, attribute, messages) { ...return false to cancel the validation...}
Qiang Xue committed
43 44 45
		beforeValidate: undefined,
		// the GET parameter name indicating an AJAX-based validation
		ajaxVar: 'ajax'
Qiang Xue committed
46 47
	};

Qiang Xue committed
48 49 50 51 52 53 54 55 56 57 58 59
	var attributeDefaults = {
		// attribute name or expression (e.g. "[0]content" for tabular input)
		name: undefined,
		// the jQuery selector of the container of the input field
		container: undefined,
		// the jQuery selector of the input field
		input: undefined,
		// the jQuery selector of the error tag
		error: undefined,
		// whether to perform validation when a change is detected on the input
		validateOnChange: false,
		// whether to perform validation when the user is typing.
60
		validateOnType: false,
Qiang Xue committed
61 62 63 64 65 66 67 68 69 70 71 72
		// number of milliseconds that the validation should be delayed when a user is typing in the input field.
		validationDelay: 200,
		// whether to enable AJAX-based validation.
		enableAjaxValidation: false,
		// function (attribute, value, messages), the client-side validation function.
		validate: undefined,
		// status of the input field, 0: empty, not entered before, 1: validated, 2: pending validation, 3: validating
		status: 0,
		// the value of the input
		value: undefined
	};

Qiang Xue committed
73 74 75 76 77 78 79 80
	var methods = {
		init: function (attributes, options) {
			return this.each(function () {
				var $form = $(this);
				if ($form.data('yiiActiveForm')) {
					return;
				}

Qiang Xue committed
81
				var settings = $.extend({}, defaults, options || {});
Qiang Xue committed
82 83 84 85
				if (settings.validationUrl === undefined) {
					settings.validationUrl = $form.attr('action');
				}
				$.each(attributes, function (i) {
86
					attributes[i] = $.extend({value: getValue($form, this)}, attributeDefaults, this);
Qiang Xue committed
87 88 89
				});
				$form.data('yiiActiveForm', {
					settings: settings,
Qiang Xue committed
90
					attributes: attributes,
Qiang Xue committed
91 92
					submitting: false,
					validated: false
Qiang Xue committed
93 94
				});

Qiang Xue committed
95
				watchAttributes($form, attributes);
Qiang Xue committed
96

Qiang Xue committed
97
				/**
Qiang Xue committed
98 99
				 * Clean up error status when the form is reset.
				 * Note that $form.on('reset', ...) does work because the "reset" event does not bubble on IE.
Qiang Xue committed
100
				 */
Qiang Xue committed
101
				$form.bind('reset.yiiActiveForm', methods.resetForm);
Qiang Xue committed
102 103

				if (settings.validateOnSubmit) {
Qiang Xue committed
104
					$form.on('mouseup.yiiActiveForm keyup.yiiActiveForm', ':submit', function () {
Qiang Xue committed
105
						$form.data('yiiActiveForm').submitObject = $(this);
Qiang Xue committed
106
					});
Qiang Xue committed
107
					$form.on('submit', methods.submitForm);
Qiang Xue committed
108 109 110 111 112 113 114 115
				}
			});
		},

		destroy: function () {
			return this.each(function () {
				$(window).unbind('.yiiActiveForm');
				$(this).removeData('yiiActiveForm');
116
			});
Qiang Xue committed
117 118
		},

119 120
		data: function() {
			return this.data('yiiActiveForm');
Qiang Xue committed
121 122
		},

Qiang Xue committed
123
		submitForm: function () {
124
			var $form = $(this),
Qiang Xue committed
125 126 127 128 129 130 131 132 133 134 135
				data = $form.data('yiiActiveForm');
			if (data.validated) {
				// continue submitting the form since validation passes
				data.validated = false;
				return true;
			}

			if (data.settings.timer !== undefined) {
				clearTimeout(data.settings.timer);
			}
			data.submitting = true;
Qiang Xue committed
136
			if (!data.settings.beforeSubmit || data.settings.beforeSubmit($form)) {
Qiang Xue committed
137 138 139 140 141 142
				validate($form, function (messages) {
					var hasError = false;
					$.each(data.attributes, function () {
						hasError = updateInput($form, this, messages) || hasError;
					});
					updateSummary($form, messages);
Qiang Xue committed
143 144 145 146 147 148 149 150 151
					if (!hasError) {
						data.validated = true;
						var $button = data.submitObject || $form.find(':submit:first');
						// TODO: if the submission is caused by "change" event, it will not work
						if ($button.length) {
							$button.click();
						} else {
							// no submit button in the form
							$form.submit();
Qiang Xue committed
152
						}
Qiang Xue committed
153
						return;
Qiang Xue committed
154 155 156 157 158 159 160 161 162 163 164 165
					}
					data.submitting = false;
				}, function () {
					data.submitting = false;
				});
			} else {
				data.submitting = false;
			}
			return false;
		},

		resetForm: function () {
166
			var $form = $(this);
Qiang Xue committed
167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185
			var data = $form.data('yiiActiveForm');
			// Because we bind directly to a form reset event instead of a reset button (that may not exist),
			// when this function is executed form input values have not been reset yet.
			// Therefore we do the actual reset work through setTimeout.
			setTimeout(function () {
				$.each(data.attributes, function () {
					// Without setTimeout() we would get the input values that are not reset yet.
					this.value = getValue($form, this);
					this.status = 0;
					var $container = $form.find(this.container);
					$container.removeClass(
						data.settings.validatingCssClass + ' ' +
							data.settings.errorCssClass + ' ' +
							data.settings.successCssClass
					);
					$container.find(this.error).html('');
				});
				$form.find(data.settings.summary).hide().find('ul').html('');
			}, 1);
Qiang Xue committed
186 187 188
		}
	};

Qiang Xue committed
189
	var watchAttributes = function ($form, attributes) {
Qiang Xue committed
190
		$.each(attributes, function (i, attribute) {
Qiang Xue committed
191 192
			var $input = findInput($form, attribute);
			if (attribute.validateOnChange) {
Qiang Xue committed
193 194 195 196 197
				$input.on('change.yiiActiveForm', function () {
					validateAttribute($form, attribute, false);
				}).on('blur.yiiActiveForm', function () {
					if (attribute.status == 0 || attribute.status == 1) {
						validateAttribute($form, attribute, !attribute.status);
Qiang Xue committed
198 199
					}
				});
Qiang Xue committed
200
			}
Qiang Xue committed
201
			if (attribute.validateOnType) {
Qiang Xue committed
202 203 204
				$input.on('keyup.yiiActiveForm', function () {
					if (attribute.value !== getValue($form, attribute)) {
						validateAttribute($form, attribute, false);
Qiang Xue committed
205 206 207 208 209 210
					}
				});
			}
		});
	};

Qiang Xue committed
211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233
	var validateAttribute = function ($form, attribute, forceValidate) {
		var data = $form.data('yiiActiveForm');

		if (forceValidate) {
			attribute.status = 2;
		}
		$.each(data.attributes, function () {
			if (this.value !== getValue($form, this)) {
				this.status = 2;
				forceValidate = true;
			}
		});
		if (!forceValidate) {
			return;
		}

		if (data.settings.timer !== undefined) {
			clearTimeout(data.settings.timer);
		}
		data.settings.timer = setTimeout(function () {
			if (data.submitting || $form.is(':hidden')) {
				return;
			}
Qiang Xue committed
234 235 236 237 238 239 240 241
			$.each(data.attributes, function () {
				if (this.status === 2) {
					this.status = 3;
					$form.find(this.container).addClass(data.settings.validatingCssClass);
				}
			});
			validate($form, function (messages) {
				var hasError = false;
Qiang Xue committed
242
				$.each(data.attributes, function () {
Qiang Xue committed
243 244
					if (this.status === 2 || this.status === 3) {
						hasError = updateInput($form, this, messages) || hasError;
Qiang Xue committed
245 246
					}
				});
Qiang Xue committed
247
			});
Qiang Xue committed
248 249 250
		}, data.settings.validationDelay);
	};
	
Qiang Xue committed
251
	/**
Qiang Xue committed
252 253 254 255
	 * Performs validation.
	 * @param $form jQuery the jquery representation of the form
	 * @param successCallback function the function to be invoked if the validation completes
	 * @param errorCallback function the function to be invoked if the ajax validation request fails
Qiang Xue committed
256
	 */
Qiang Xue committed
257
	var validate = function ($form, successCallback, errorCallback) {
Qiang Xue committed
258
		var data = $form.data('yiiActiveForm'),
Qiang Xue committed
259 260
			needAjaxValidation = false,
			messages = {};
Qiang Xue committed
261 262

		$.each(data.attributes, function () {
Qiang Xue committed
263 264
			if (data.submitting || this.status === 2 || this.status === 3) {
				var msg = [];
Qiang Xue committed
265 266 267 268
				if (!data.settings.beforeValidate || data.settings.beforeValidate($form, this, msg)) {
					if (this.validate) {
						this.validate(this, getValue($form, this), msg);
					}
Qiang Xue committed
269 270
					if (msg.length) {
						messages[this.name] = msg;
Qiang Xue committed
271 272
					} else if (this.enableAjaxValidation) {
						needAjaxValidation = true;
Qiang Xue committed
273 274
					}
				}
Qiang Xue committed
275 276 277
			}
		});

Qiang Xue committed
278
		if (needAjaxValidation && (!data.submitting || $.isEmptyObject(messages))) {
Qiang Xue committed
279 280 281
			// Perform ajax validation when at least one input needs it.
			// If the validation is triggered by form submission, ajax validation
			// should be done only when all inputs pass client validation
Qiang Xue committed
282 283 284 285
			var $button = data.submitObject,
				extData = '&' + data.settings.ajaxVar + '=' + $form.attr('id');
			if ($button && $button.length && $button.attr('name')) {
				extData += '&' + $button.attr('name') + '=' + $button.attr('value');
Qiang Xue committed
286
			}
Qiang Xue committed
287 288 289 290 291 292 293 294 295 296 297 298 299 300 301
			$.ajax({
				url: data.settings.validationUrl,
				type: $form.attr('method'),
				data: $form.serialize() + extData,
				dataType: 'json',
				success: function (msgs) {
					if (msgs !== null && typeof msgs === 'object') {
						$.each(data.attributes, function () {
							if (!this.enableAjaxValidation) {
								delete msgs[this.name];
							}
						});
						successCallback($.extend({}, messages, msgs));
					} else {
						successCallback(messages);
Qiang Xue committed
302
					}
Qiang Xue committed
303 304
				},
				error: errorCallback
Qiang Xue committed
305
			});
Qiang Xue committed
306 307 308 309 310
		} else if (data.submitting) {
			// delay callback so that the form can be submitted without problem
			setTimeout(function () {
				successCallback(messages);
			}, 200);
Qiang Xue committed
311
		} else {
Qiang Xue committed
312
			successCallback(messages);
Qiang Xue committed
313
		}
Qiang Xue committed
314 315 316
	};

	/**
Qiang Xue committed
317
	 * Updates the error message and the input container for a particular attribute.
318
	 * @param $form the form jQuery object
Qiang Xue committed
319 320
	 * @param attribute object the configuration for a particular attribute.
	 * @param messages array the validation error messages
Qiang Xue committed
321 322
	 * @return boolean whether there is a validation error for the specified attribute
	 */
Qiang Xue committed
323 324 325 326
	var updateInput = function ($form, attribute, messages) {
		var data = $form.data('yiiActiveForm'),
			$input = findInput($form, attribute),
			hasError = false;
Qiang Xue committed
327

Qiang Xue committed
328 329
		attribute.status = 1;
		if ($input.length) {
Qiang Xue committed
330
			hasError = messages && $.isArray(messages[attribute.name]) && messages[attribute.name].length;
Qiang Xue committed
331
			var $container = $form.find(attribute.container);
Qiang Xue committed
332
			var $error = $container.find(attribute.error);
Qiang Xue committed
333
			if (hasError) {
Qiang Xue committed
334 335 336 337 338 339 340
				$error.html(messages[attribute.name][0]);
				$container.removeClass(data.settings.validatingCssClass + ' ' + data.settings.successCssClass)
					.addClass(data.settings.errorCssClass);
			} else {
				$error.html('');
				$container.removeClass(data.settings.validatingCssClass + ' ' + data.settings.errorCssClass + ' ')
					.addClass(data.settings.successCssClass);
Qiang Xue committed
341
			}
Qiang Xue committed
342
			attribute.value = getValue($form, attribute);
Qiang Xue committed
343 344 345 346
		}
		return hasError;
	};

Qiang Xue committed
347 348 349 350 351
	/**
	 * Updates the error summary.
	 * @param $form the form jQuery object
	 * @param messages array the validation error messages
	 */
Qiang Xue committed
352 353
	var updateSummary = function ($form, messages) {
		var data = $form.data('yiiActiveForm'),
Qiang Xue committed
354
			$summary = $form.find(data.settings.errorSummary),
Qiang Xue committed
355
			content = '';
Qiang Xue committed
356 357 358

		if ($summary.length && messages) {
			$.each(data.attributes, function () {
Qiang Xue committed
359 360
				if ($.isArray(messages[this.name]) && messages[this.name].length) {
					content += '<li>' + messages[this.name][0] + '</li>';
Qiang Xue committed
361 362
				}
			});
Qiang Xue committed
363
			$summary.toggle(content !== '').find('ul').html(content);
Qiang Xue committed
364
		}
Qiang Xue committed
365 366
	};

Qiang Xue committed
367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386
	var getValue = function ($form, attribute) {
		var $input = findInput($form, attribute);
		var type = $input.attr('type');
		if (type === 'checkbox' || type === 'radio') {
			return $input.filter(':checked').val();
		} else {
			return $input.val();
		}
	};

	var findInput = function ($form, attribute) {
		var $input = $form.find(attribute.input);
		if ($input.length && $input[0].tagName.toLowerCase() === 'div') {
			// checkbox list or radio list
			return $input.find('input');
		} else {
			return $input;
		}
	};

387
})(window.jQuery);