yii.activeForm.js 12.7 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 48
		// the GET parameter name indicating an AJAX-based validation
		ajaxVar: 'ajax'
Qiang Xue committed
49 50
	};

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

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

Qiang Xue committed
98
				watchAttributes($form, attributes);
Qiang Xue committed
99

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

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

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

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

Qiang Xue committed
126
		submitForm: function () {
127
			var $form = $(this),
Qiang Xue committed
128 129 130 131 132 133 134 135 136 137 138
				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
139
			if (!data.settings.beforeSubmit || data.settings.beforeSubmit($form)) {
Qiang Xue committed
140
				validate($form, function (messages) {
141
					var errors = [];
Qiang Xue committed
142
					$.each(data.attributes, function () {
143 144 145
						if (updateInput($form, this, messages)) {
							errors.push(this.input);
						}
Qiang Xue committed
146 147
					});
					updateSummary($form, messages);
148
					if (errors.length) {
Qiang Xue committed
149 150 151 152 153
						var top = $form.find(errors.join(',')).first().offset().top;
						var wtop = $(window).scrollTop();
						if (top < wtop || top > wtop + $(window).height) {
							$(window).scrollTop(top);
						}
154
					} else {
Qiang Xue committed
155 156 157 158 159 160 161 162
						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
163
						}
Qiang Xue committed
164
						return;
Qiang Xue committed
165 166 167 168 169 170 171 172 173 174 175 176
					}
					data.submitting = false;
				}, function () {
					data.submitting = false;
				});
			} else {
				data.submitting = false;
			}
			return false;
		},

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

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

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

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

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

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

339 340 341
		if (data.settings.afterValidate) {
			data.settings.afterValidate($form, attribute, messages);
		}
Qiang Xue committed
342 343
		attribute.status = 1;
		if ($input.length) {
Qiang Xue committed
344
			hasError = messages && $.isArray(messages[attribute.name]) && messages[attribute.name].length;
Qiang Xue committed
345
			var $container = $form.find(attribute.container);
Qiang Xue committed
346
			var $error = $container.find(attribute.error);
Qiang Xue committed
347
			if (hasError) {
348
				$error.text(messages[attribute.name][0]);
Qiang Xue committed
349 350 351 352 353 354
				$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
355
			}
Qiang Xue committed
356
			attribute.value = getValue($form, attribute);
Qiang Xue committed
357 358 359 360
		}
		return hasError;
	};

Qiang Xue committed
361 362 363 364 365
	/**
	 * Updates the error summary.
	 * @param $form the form jQuery object
	 * @param messages array the validation error messages
	 */
Qiang Xue committed
366 367
	var updateSummary = function ($form, messages) {
		var data = $form.data('yiiActiveForm'),
Qiang Xue committed
368
			$summary = $form.find(data.settings.errorSummary),
Qiang Xue committed
369
			content = '';
Qiang Xue committed
370 371 372

		if ($summary.length && messages) {
			$.each(data.attributes, function () {
Qiang Xue committed
373 374
				if ($.isArray(messages[this.name]) && messages[this.name].length) {
					content += '<li>' + messages[this.name][0] + '</li>';
Qiang Xue committed
375 376
				}
			});
Qiang Xue committed
377
			$summary.toggle(content !== '').find('ul').html(content);
Qiang Xue committed
378
		}
Qiang Xue committed
379 380
	};

Qiang Xue committed
381 382
	var getValue = function ($form, attribute) {
		var $input = findInput($form, attribute);
Qiang Xue committed
383
		var type = $input.prop('type');
Qiang Xue committed
384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400
		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;
		}
	};

401
})(window.jQuery);