yii.activeForm.js 13 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
		beforeValidate: undefined,
44 45 46
		// a callback that is called after an attribute is validated. The signature of the callback should be:
		// function ($form, attribute, messages)
		afterValidate: undefined,
Qiang Xue committed
47
		// the GET parameter name indicating an AJAX-based validation
48
		ajaxParam: 'ajax',
49 50
		// the type of data that you're expecting back from the server
		ajaxDataType: 'json'
Qiang Xue committed
51 52
	};

Qiang Xue committed
53 54 55 56 57 58 59 60 61 62 63 64
	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.
65
		validateOnType: false,
Qiang Xue committed
66 67 68 69 70 71 72 73 74 75 76 77
		// 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
78 79 80 81 82 83 84 85
	var methods = {
		init: function (attributes, options) {
			return this.each(function () {
				var $form = $(this);
				if ($form.data('yiiActiveForm')) {
					return;
				}

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

Qiang Xue committed
100
				watchAttributes($form, attributes);
Qiang Xue committed
101

Qiang Xue committed
102
				/**
Qiang Xue committed
103 104
				 * 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
105
				 */
Qiang Xue committed
106
				$form.bind('reset.yiiActiveForm', methods.resetForm);
Qiang Xue committed
107 108

				if (settings.validateOnSubmit) {
Qiang Xue committed
109
					$form.on('mouseup.yiiActiveForm keyup.yiiActiveForm', ':submit', function () {
Qiang Xue committed
110
						$form.data('yiiActiveForm').submitObject = $(this);
Qiang Xue committed
111
					});
Qiang Xue committed
112
					$form.on('submit', methods.submitForm);
Qiang Xue committed
113 114 115 116 117 118 119 120
				}
			});
		},

		destroy: function () {
			return this.each(function () {
				$(window).unbind('.yiiActiveForm');
				$(this).removeData('yiiActiveForm');
121
			});
Qiang Xue committed
122 123
		},

124 125
		data: function() {
			return this.data('yiiActiveForm');
Qiang Xue committed
126 127
		},

Qiang Xue committed
128
		submitForm: function () {
129
			var $form = $(this),
Qiang Xue committed
130 131
				data = $form.data('yiiActiveForm');
			if (data.validated) {
132 133 134 135 136 137 138
				if (data.settings.beforeSubmit !== undefined) {
					if (data.settings.beforeSubmit($form) == false) {
						data.validated = false;
						data.submitting = false;
						return false;
					}
				}
Qiang Xue committed
139 140 141 142 143 144 145 146
				// continue submitting the form since validation passes
				return true;
			}

			if (data.settings.timer !== undefined) {
				clearTimeout(data.settings.timer);
			}
			data.submitting = true;
147 148 149 150 151
			validate($form, function (messages) {
				var errors = [];
				$.each(data.attributes, function () {
					if (updateInput($form, this, messages)) {
						errors.push(this.input);
Qiang Xue committed
152 153
					}
				});
154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172
				updateSummary($form, messages);
				if (errors.length) {
					var top = $form.find(errors.join(',')).first().offset().top;
					var wtop = $(window).scrollTop();
					if (top < wtop || top > wtop + $(window).height) {
						$(window).scrollTop(top);
					}
				} else {
					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();
					}
					return;
				}
Qiang Xue committed
173
				data.submitting = false;
174 175 176
			}, function () {
				data.submitting = false;
			});
Qiang Xue committed
177 178 179 180
			return false;
		},

		resetForm: function () {
181
			var $form = $(this);
Qiang Xue committed
182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200
			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
201 202 203
		}
	};

Qiang Xue committed
204
	var watchAttributes = function ($form, attributes) {
Qiang Xue committed
205
		$.each(attributes, function (i, attribute) {
Qiang Xue committed
206 207
			var $input = findInput($form, attribute);
			if (attribute.validateOnChange) {
Qiang Xue committed
208 209 210 211 212
				$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
213 214
					}
				});
Qiang Xue committed
215
			}
Qiang Xue committed
216
			if (attribute.validateOnType) {
Qiang Xue committed
217 218 219
				$input.on('keyup.yiiActiveForm', function () {
					if (attribute.value !== getValue($form, attribute)) {
						validateAttribute($form, attribute, false);
Qiang Xue committed
220 221 222 223 224 225
					}
				});
			}
		});
	};

Qiang Xue committed
226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248
	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
249 250 251 252 253 254 255 256
			$.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
257
				$.each(data.attributes, function () {
Qiang Xue committed
258 259
					if (this.status === 2 || this.status === 3) {
						hasError = updateInput($form, this, messages) || hasError;
Qiang Xue committed
260 261
					}
				});
Qiang Xue committed
262
			});
Qiang Xue committed
263 264 265
		}, data.settings.validationDelay);
	};
	
Qiang Xue committed
266
	/**
Qiang Xue committed
267 268 269 270
	 * 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
271
	 */
Qiang Xue committed
272
	var validate = function ($form, successCallback, errorCallback) {
Qiang Xue committed
273
		var data = $form.data('yiiActiveForm'),
Qiang Xue committed
274 275
			needAjaxValidation = false,
			messages = {};
Qiang Xue committed
276 277

		$.each(data.attributes, function () {
Qiang Xue committed
278 279
			if (data.submitting || this.status === 2 || this.status === 3) {
				var msg = [];
Qiang Xue committed
280 281 282 283
				if (!data.settings.beforeValidate || data.settings.beforeValidate($form, this, msg)) {
					if (this.validate) {
						this.validate(this, getValue($form, this), msg);
					}
Qiang Xue committed
284 285
					if (msg.length) {
						messages[this.name] = msg;
Qiang Xue committed
286 287
					} else if (this.enableAjaxValidation) {
						needAjaxValidation = true;
Qiang Xue committed
288 289
					}
				}
Qiang Xue committed
290 291 292
			}
		});

Qiang Xue committed
293
		if (needAjaxValidation && (!data.submitting || $.isEmptyObject(messages))) {
Qiang Xue committed
294 295 296
			// 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
297
			var $button = data.submitObject,
298
				extData = '&' + data.settings.ajaxParam + '=' + $form.prop('id');
Qiang Xue committed
299 300
			if ($button && $button.length && $button.prop('name')) {
				extData += '&' + $button.prop('name') + '=' + $button.prop('value');
Qiang Xue committed
301
			}
Qiang Xue committed
302 303
			$.ajax({
				url: data.settings.validationUrl,
Qiang Xue committed
304
				type: $form.prop('method'),
Qiang Xue committed
305
				data: $form.serialize() + extData,
306
				dataType: data.settings.ajaxDataType,
Qiang Xue committed
307 308 309 310 311 312 313 314 315 316
				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
317
					}
Qiang Xue committed
318 319
				},
				error: errorCallback
Qiang Xue committed
320
			});
Qiang Xue committed
321 322 323 324 325
		} else if (data.submitting) {
			// delay callback so that the form can be submitted without problem
			setTimeout(function () {
				successCallback(messages);
			}, 200);
Qiang Xue committed
326
		} else {
Qiang Xue committed
327
			successCallback(messages);
Qiang Xue committed
328
		}
Qiang Xue committed
329 330 331
	};

	/**
Qiang Xue committed
332
	 * Updates the error message and the input container for a particular attribute.
333
	 * @param $form the form jQuery object
Qiang Xue committed
334 335
	 * @param attribute object the configuration for a particular attribute.
	 * @param messages array the validation error messages
Qiang Xue committed
336 337
	 * @return boolean whether there is a validation error for the specified attribute
	 */
Qiang Xue committed
338 339 340 341
	var updateInput = function ($form, attribute, messages) {
		var data = $form.data('yiiActiveForm'),
			$input = findInput($form, attribute),
			hasError = false;
Qiang Xue committed
342

343 344 345
		if (data.settings.afterValidate) {
			data.settings.afterValidate($form, attribute, messages);
		}
Qiang Xue committed
346 347
		attribute.status = 1;
		if ($input.length) {
Qiang Xue committed
348
			hasError = messages && $.isArray(messages[attribute.name]) && messages[attribute.name].length;
Qiang Xue committed
349
			var $container = $form.find(attribute.container);
Qiang Xue committed
350
			var $error = $container.find(attribute.error);
Qiang Xue committed
351
			if (hasError) {
352
				$error.text(messages[attribute.name][0]);
Qiang Xue committed
353 354 355
				$container.removeClass(data.settings.validatingCssClass + ' ' + data.settings.successCssClass)
					.addClass(data.settings.errorCssClass);
			} else {
356
				$error.text('');
Qiang Xue committed
357 358
				$container.removeClass(data.settings.validatingCssClass + ' ' + data.settings.errorCssClass + ' ')
					.addClass(data.settings.successCssClass);
Qiang Xue committed
359
			}
Qiang Xue committed
360
			attribute.value = getValue($form, attribute);
Qiang Xue committed
361 362 363 364
		}
		return hasError;
	};

Qiang Xue committed
365 366 367 368 369
	/**
	 * Updates the error summary.
	 * @param $form the form jQuery object
	 * @param messages array the validation error messages
	 */
Qiang Xue committed
370 371
	var updateSummary = function ($form, messages) {
		var data = $form.data('yiiActiveForm'),
Qiang Xue committed
372
			$summary = $form.find(data.settings.errorSummary),
373
			$ul = $summary.find('ul').html('');
Qiang Xue committed
374 375 376

		if ($summary.length && messages) {
			$.each(data.attributes, function () {
Qiang Xue committed
377
				if ($.isArray(messages[this.name]) && messages[this.name].length) {
378
					$ul.append($('<li/>').text(messages[this.name][0]));
Qiang Xue committed
379 380
				}
			});
381
			$summary.toggle($ul.find('li').length > 0);
Qiang Xue committed
382
		}
Qiang Xue committed
383 384
	};

Qiang Xue committed
385 386
	var getValue = function ($form, attribute) {
		var $input = findInput($form, attribute);
Qiang Xue committed
387
		var type = $input.prop('type');
Qiang Xue committed
388
		if (type === 'checkbox' || type === 'radio') {
389 390 391 392 393
			var $realInput = $input.filter(':checked');
			if (!$realInput.length) {
				$realInput = $form.find('input[type=hidden][name="'+$input.prop('name')+'"]');
			}
			return $realInput.val();
Qiang Xue committed
394 395 396 397 398 399 400 401 402 403 404 405 406 407 408
		} 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;
		}
	};

409
})(window.jQuery);