form wip

framework/assets/yii.activeForm.js

@@ -23,9 +23,11 @@
 	};
 
 	var defaults = {
-		enableAjaxValidation: false,
+		// whether to enable client-side (JavaScript) validation
 		enableClientValidation: true,
-		// the URL for performing AJAX validation. If not set, it will use the the form's action
+		// whether to enable AJAX-based validation
+		enableAjaxValidation: false,
+		// the URL for performing AJAX-based validation. If not set, it will use the the form's action
 		validationUrl: undefined,
 		// number of milliseconds of validation delay. This is used when validateOnType is true.
 		validationDelay: 200,
@@ -33,14 +35,20 @@
 		validateOnChange: true,
 		// whether to perform validation when the user is typing.
 		validateOnType: false,
+		// whether to perform validation before submitting the form.
+		validateOnSubmit: true,
 		// the container CSS class representing the corresponding attribute has validation error
 		errorCssClass: 'error',
 		// the container CSS class representing the corresponding attribute passes validation
  		successCssClass: 'success',
 		// the container CSS class representing the corresponding attribute is being validated
 		validatingCssClass: 'validating',
-		// whether it is waiting for ajax submission result
+		// a callback that is called before validating any attribute
-		submitting: false
+		beforeValidate: undefined,
+		// a callback that is called after validating any attribute
+		afterValidate: undefined,
+		// the GET parameter name indicating an AJAX-based validation
+		ajaxVar: 'ajax'
 	};
 
 	var methods = {
@@ -53,9 +61,6 @@
 		 * - input: string, the jQuery selector of the input field
 		 * - error: string, the jQuery selector of the error tag
 		 * - value: string|array, the value of the input
-		 * - validationDelay: integer, number of milliseconds of validation delay.
-		 *   This is used when validateOnType is true. If not set, it will take the value
-		 *   of the corresponding global setting.
 		 * - validateOnChange: boolean, whether to perform validation when a change is detected on the input.
 		 *   If not set, it will take the value of the corresponding global setting.
 		 * - validateOnType: boolean, defaults to false, whether to perform validation when the user is typing.
@@ -84,27 +89,33 @@
 					settings.validationUrl = $form.attr('action');
 				}
 				$.each(attributes, function (i) {
-					this.value = getInputValue($form.find(this.inputSelector));
+					attributes[i] = $.extend({
-					attributes[i] = $.extend(settings, this);
+						validateOnChange: settings.validateOnChange,
+						validateOnType: settings.validateOnType,
+						enableAjaxValidation: settings.enableAjaxValidation,
+						enableClientValidation: settings.enableClientValidation,
+						value: getValue($form, this)
+					}, this);
 				});
 				$form.data('yiiActiveForm', {
 					settings: settings,
-					attributes: attributes
+					attributes: attributes,
+					submitting: false
 				});
 
 				bindAttributes($form, attributes);
 
 				/**
-				 * Clean up error status when resetting the form.
+				 * Clean up error status when the form is reset.
-				 * Note that neither $form.reset(...) nor $form.on('reset', ...) works.
+				 * Note that $form.on('reset', ...) does work because the "reset" event does not bubble on IE.
 				 */
-				$form.bind('reset', resetForm);
+				$form.bind('reset.yiiActiveForm', resetForm);
 
 				if (settings.validateOnSubmit) {
 					$form.on('mouseup.yiiActiveForm keyup.yiiActiveForm', ':submit', function () {
-						$form.data('submitObject', $(this));
+						$form.data('yiiActiveForm').submitObject = $(this);
 					});
-					$form.submit(submitForm);
+					$form.on('submit', submitForm);
 				}
 			});
 		},
@@ -117,44 +128,23 @@
 		}
 	};
 
-	/**
+	var getValue = function ($form, attribute) {
-	 * Returns the value of the specified input element.
+		var $input = findInput($form, attribute);
-	 * This method will perform additional checks to get proper values
+		var type = $input.attr('type');
-	 * for checkbox, radio, checkbox list and radio list.
-	 * @param $e jQuery the jQuery object of the input element
-	 * @return string the input value
-	 */
-	var getInputValue = function ($input) {
-		// TBD
-		var type,
-			c = [];
-		if (!$e.length) {
-			return undefined;
-		}
-		if ($e[0].tagName.toLowerCase() === 'div') {
-			$e.find(':checked').each(function () {
-				c.push(this.value);
-			});
-			return c.join(',');
-		}
-		type = $e.attr('type');
 		if (type === 'checkbox' || type === 'radio') {
-			return $e.filter(':checked').val();
+			return $input.filter(':checked').val();
 		} else {
-			return $e.val();
+			return $input.val();
 		}
 	};
 
 	var findInput = function ($form, attribute) {
-		var $e = $form.find(attribute.inputSelector);
+		var $input = $form.find(attribute.input);
-		if (!$e.length) {
+		if ($input.length && $input[0].tagName.toLowerCase() === 'div') {
-			return undefined;
-		}
-		if ($e[0].tagName.toLowerCase() === 'div') {
 			// checkbox list or radio list
-			return $e.find('input');
+			return $input.find('input');
 		} else {
-			return $e;
+			return $input;
 		}
 	};
 
@@ -162,22 +152,67 @@
 		$.each(attributes, function (i, attribute) {
 			var $input = findInput($form, attribute);
 			if (attribute.validateOnChange) {
-				$input.change(function () {
+				$input.on('change.yiiActiveForm', function () {
-					validateAttribute(attribute, false);
+					validateAttribute($form, attribute, false);
-				}).blur(function () {
+				}).on('blur.yiiActiveForm', function () {
-					if (attribute.status !== 2 && attribute.status !== 3) {
+					if (attribute.status == 0 || attribute.status == 1) {
-						validateAttribute(attribute, !attribute.status);
+						validateAttribute($form, attribute, !attribute.status);
 					}
 				});
 			}
 			if (attribute.validateOnType) {
-				$input.keyup(function () {
+				$input.on('keyup.yiiActiveForm', function () {
-					if (attribute.value !== getInputValue($input)) {
+					if (attribute.value !== getValue($form, attribute)) {
-						validateAttribute(attribute, false);
+						validateAttribute($form, attribute, false);
+					}
+				});
+			}
+		});
+	};
+
+	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;
+			}
+			if (!attribute.beforeValidate || attribute.beforeValidate($form, attribute)) {
+				$.each(data.attributes, function () {
+					if (this.status === 2) {
+						this.status = 3;
+						$form.find(this.container).addClass(data.settings.validatingCssClass);
 					}
 				});
+				validateForm($form, function (messages) {
+					var hasError = false;
+					$.each(data.attributes, function () {
+						if (this.status === 2 || this.status === 3) {
+							hasError = updateInput($form, this, messages) || hasError;
+						}
+					});
+					if (attribute.afterValidate) {
+						attribute.afterValidate($form, attribute, messages, hasError);
 					}
 				});
+			}
+		}, data.settings.validationDelay);
 	};
 	
 	/**
@@ -187,28 +222,26 @@
 	 * @param successCallback function the function to be invoked if the ajax request succeeds
 	 * @param errorCallback function the function to be invoked if the ajax request fails
 	 */
-	var validateForm = function (form, successCallback, errorCallback) {
+	var validateForm = function ($form, successCallback, errorCallback) {
-		var $form = $(form),
+		var data = $form.data('yiiActiveForm'),
-			settings = $form.data('settings'),
 			needAjaxValidation = false,
 			messages = {};
-		$.each(settings.attributes, function () {
+
-			var value,
+		$.each(data.attributes, function () {
-				msg = [];
+			var msg = [];
-			if (this.clientValidation !== undefined && (settings.submitting || this.status === 2 || this.status === 3)) {
+			if (this.validate && (data.submitting || this.status === 2 || this.status === 3)) {
-				value = getInputValue($form.find('#' + this.inputID));
+				this.validate(this, getValue($form, this), msg);
-				this.clientValidation(value, msg, this);
 				if (msg.length) {
-					messages[this.id] = msg;
+					messages[this.name] = msg;
 				}
 			}
-			if (this.enableAjaxValidation && !msg.length && (settings.submitting || this.status === 2 || this.status === 3)) {
+			if (this.enableAjaxValidation && !msg.length && (data.submitting || this.status === 2 || this.status === 3)) {
 				needAjaxValidation = true;
 			}
 		});
 
-		if (!needAjaxValidation || settings.submitting && !$.isEmptyObject(messages)) {
+		if (!needAjaxValidation || data.submitting && !$.isEmptyObject(messages)) {
-			if (settings.submitting) {
+			if (data.submitting) {
 				// delay callback so that the form can be submitted without problem
 				setTimeout(function () {
 					successCallback(messages);
@@ -219,22 +252,22 @@
 			return;
 		}
 
-		var $button = $form.data('submitObject'),
+		var $button = data.submitObject,
-			extData = '&' + settings.ajaxVar + '=' + $form.attr('id');
+			extData = '&' + data.settings.ajaxVar + '=' + $form.attr('id');
-		if ($button && $button.length) {
+		if ($button && $button.length && $button.attr('name')) {
 			extData += '&' + $button.attr('name') + '=' + $button.attr('value');
 		}
 
 		$.ajax({
-			url: settings.validationUrl,
+			url: data.settings.validationUrl,
 			type: $form.attr('method'),
 			data: $form.serialize() + extData,
 			dataType: 'json',
 			success: function (data) {
 				if (data !== null && typeof data === 'object') {
-					$.each(settings.attributes, function () {
+					$.each(data.attributes, function () {
 						if (!this.enableAjaxValidation) {
-							delete data[this.id];
+							delete data[this.name];
 						}
 					});
 					successCallback($.extend({}, messages, data));
@@ -242,138 +275,75 @@
 					successCallback(messages);
 				}
 			},
-			error: function () {
+			error: errorCallback
-				if (errorCallback !== undefined) {
-					errorCallback();
-				}
-			}
 		});
 	};
 
-	var validateAttribute = function (attribute, forceValidate) {
+	var validated = false;
-		if (forceValidate) {
-			attribute.status = 2;
-		}
-		$.each(attributes, function () {
-			if (this.value !== getInputValue($form.find('#' + this.inputID))) {
-				this.status = 2;
-				forceValidate = true;
-			}
-		});
-		if (!forceValidate) {
-			return;
-		}
-
-		if (settings.timer !== undefined) {
-			clearTimeout(settings.timer);
-		}
-		settings.timer = setTimeout(function () {
-			if (settings.submitting || $form.is(':hidden')) {
-				return;
-			}
-			if (attribute.beforeValidateAttribute === undefined || attribute.beforeValidateAttribute($form, attribute)) {
-				$.each(settings.attributes, function () {
-					if (this.status === 2) {
-						this.status = 3;
-						$.fn.yiiactiveform.getInputContainer(this, $form).addClass(this.validatingCssClass);
-					}
-				});
-				$.fn.yiiactiveform.validate($form, function (data) {
-					var hasError = false;
-					$.each(settings.attributes, function () {
-						if (this.status === 2 || this.status === 3) {
-							hasError = $.fn.yiiactiveform.updateInput(this, data, $form) || hasError;
-						}
-					});
-					if (attribute.afterValidateAttribute !== undefined) {
-						attribute.afterValidateAttribute($form, attribute, data, hasError);
-					}
-				});
-			}
-		}, attribute.validationDelay);
-	};
-
 	var submitForm = function () {
+		var $form = $(this),
+			data = $form.data('yiiActiveForm');
 		if (validated) {
 			validated = false;
 			return true;
 		}
-		if (settings.timer !== undefined) {
+		if (data.settings.timer !== undefined) {
-			clearTimeout(settings.timer);
+			clearTimeout(data.settings.timer);
 		}
-		settings.submitting = true;
+		data.submitting = true;
-		if (settings.beforeValidate === undefined || settings.beforeValidate($form)) {
+		if (!data.settings.beforeValidate || data.settings.beforeValidate($form)) {
-			$.fn.yiiactiveform.validate($form, function (data) {
+			validateForm($form, function (messages) {
 				var hasError = false;
-				$.each(settings.attributes, function () {
+				$.each(data.attributes, function () {
-					hasError = $.fn.yiiactiveform.updateInput(this, data, $form) || hasError;
+					hasError = updateInput($form, this, messages) || hasError;
 				});
-				$.fn.yiiactiveform.updateSummary($form, data);
+				updateSummary($form, messages);
-				if (settings.afterValidate === undefined || settings.afterValidate($form, data, hasError)) {
+				if (!data.settings.afterValidate || data.settings.afterValidate($form, data, hasError)) {
 					if (!hasError) {
 						validated = true;
-						var $button = $form.data('submitObject') || $form.find(':submit:first');
+						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
+						} else {
+							// no submit button in the form
 							$form.submit();
 						}
 						return;
 					}
 				}
-				settings.submitting = false;
+				data.submitting = false;
 			});
 		} else {
-			settings.submitting = false;
+			data.submitting = false;
 		}
 		return false;
 	};
 
 	var resetForm = function () {
-		var settings = $(this).data('yiiActiveForm').settings;
+		var $form = $(this);
-		var attributes = $(this).data('yiiActiveForm').attributes;
+		var data = $form.data('yiiActiveForm');
-		/*
+		/**
 		 * because we bind directly to a form reset event, not to a reset button (that could or could not exist),
 		 * when this function is executed form elements values have not been reset yet,
 		 * because of that we use the setTimeout
 		 */
 		setTimeout(function () {
-			$.each(attributes, function () {
+			$.each(data.attributes, function () {
 				this.status = 0;
-				var $error = $form.find('#' + this.errorID),
+				$form.find(this.container).removeClass(
-					$container = getInputContainer(this, $form);
+					data.settings.validatingCssClass + ' ' +
-
+					data.settings.errorCssClass + ' ' +
-				$container.removeClass(
+					data.settings.successCssClass
-					settings.validatingCssClass + ' ' +
-					settings.errorCssClass + ' ' +
-					settings.successCssClass
 				);
-
+				$form.find(this.error).html('');
-				$error.html('').hide();
-
 				/*
-				 * without the setTimeout() we would get here the current entered value before the reset instead of the reseted value
+				 * without the setTimeout() we would get here the current entered value before the reset instead of the reset value
 				 */
-				this.value = getInputValue($form.find('#' + this.inputID));
+				this.value = getValue($form, this);
 			});
-			$('#' + settings.summaryID).hide().find('ul').html('');
+			$form.find(data.settings.summary).hide().find('ul').html('');
-		}, 10);
+		}, 1);
-	};
-
-
-	/**
-	 * Returns the container element of the specified attribute.
-	 * @param attribute object the configuration for a particular attribute.
-	 * @param form the form jQuery object
-	 * @return jQuery the jQuery representation of the container
-	 */
-	var getInputContainer = function (attribute, form) {
-		if (attribute.inputContainer === undefined) {
-			return form.find('#' + attribute.inputID).closest('div');
-		} else {
-			return form.find(attribute.inputContainer).filter(':has("#' + attribute.inputID + '")');
-		}
 	};
 
 	/**
@@ -383,71 +353,45 @@
 	 * @param form the form jQuery object
 	 * @return boolean whether there is a validation error for the specified attribute
 	 */
-	var updateInput = function (attribute, messages, form) {
+	var updateInput = function ($form, attribute, messages) {
-		attribute.status = 1;
+		var data = $form.data('yiiActiveForm'),
-		var $error, $container,
+			$input = findInput($form, attribute),
-			hasError = false,
+			hasError = false;
-			$el = form.find('#' + attribute.inputID),
-			errorCss = form.data('settings').errorCss;
-
-		if ($el.length) {
-			hasError = messages !== null && $.isArray(messages[attribute.id]) && messages[attribute.id].length > 0;
-			$error = form.find('#' + attribute.errorID);
-			$container = $.fn.yiiactiveform.getInputContainer(attribute, form);
 
+		attribute.status = 1;
+		if ($input.length) {
+			hasError = messages && $.isArray(messages[attribute.id]) && messages[attribute.name].length;
+			var $container = $form.find(attribute.container);
 			$container.removeClass(
-				attribute.validatingCssClass + ' ' +
+				data.settings.validatingCssClass + ' ' +
-					attribute.errorCssClass + ' ' +
+				data.settings.errorCssClass + ' ' +
-					attribute.successCssClass
+				data.settings.successCssClass
 			);
-			$container.find('label, input').each(function () {
-				$(this).removeClass(errorCss);
-			});
 
 			if (hasError) {
-				$error.html(messages[attribute.id][0]);
+				$form.find(attribute.error).html(messages[attribute.name][0]);
-				$container.addClass(attribute.errorCssClass);
+				$container.addClass(data.settings.errorCssClass);
-			} else if (attribute.enableAjaxValidation || attribute.clientValidation) {
+			} else if (attribute.enableAjaxValidation || attribute.enableClientValidation && attribute.validate) {
-				$container.addClass(attribute.successCssClass);
+				$container.addClass(data.settings.successCssClass);
-			}
-			if (!attribute.hideErrorMessage) {
-				$error.toggle(hasError);
 			}
-
+			attribute.value = getValue($form, attribute);
-			attribute.value = getAFValue($el);
 		}
 		return hasError;
 	};
 
-	/**
+	var updateSummary = function ($form, messages) {
-	 * updates the error summary, if any.
+		var data = $form.data('yiiActiveForm'),
-	 * @param form jquery the jquery representation of the form
+			$summary = $form.find(data.settings.summary),
-	 * @param messages array the json data obtained from the ajax validation request
-	 */
-	var updateSummary = function (form, messages) {
-		var settings = $(form).data('yiiActiveForm'),
 			content = '';
-		if (settings.summaryID === undefined) {
+
-			return;
+		if ($summary.length && messages) {
-		}
+			$.each(data.attributes, function () {
-		if (messages) {
+				if ($.isArray(messages[this.name])) {
-			$.each(settings.attributes, function () {
+					content += '<li>' + messages[this.name].join('</li><li>') + '</li>';
-				if ($.isArray(messages[this.id])) {
-					$.each(messages[this.id], function (j, message) {
-						content = content + '<li>' + message + '</li>';
-					});
 				}
 			});
+			$summary.toggle(content !== '').find('ul').html(content);
 		}
-		$('#' + settings.summaryID).toggle(content !== '').find('ul').html(content);
-	};
-
-	var getSettings = function (form) {
-		return $(form).data('yiiActiveForm').settings;
-	};
-
-	var getAttributes = function (form) {
-		return $(form).data('yiiActiveForm').attributes;
 	};
 
 })(window.jQuery);

framework/validators/Validator.php

@@ -102,12 +102,6 @@ abstract class Validator extends Component
 	public $skipOnEmpty = true;
 
 	/**
-	 * @var boolean whether to enable client-side validation. Defaults to null, meaning
-	 * its actual value inherits from that of [[\yii\web\ActiveForm::enableClientValidation]].
-	 */
-	public $enableClientValidation;
-
-	/**
 	 * Validates a single attribute.
 	 * Child classes must implement this method to provide the actual validation logic.
 	 * @param \yii\base\Model $object the data object to be validated
@@ -211,7 +205,6 @@ abstract class Validator extends Component
 	 * @param string $attribute the name of the attribute to be validated.
 	 * @return string the client-side validation script. Null if the validator does not support
 	 * client-side validation.
-	 * @see enableClientValidation
 	 * @see \yii\web\ActiveForm::enableClientValidation
 	 */
 	public function clientValidateAttribute($object, $attribute)

framework/widgets/ActiveField.php

@@ -10,6 +10,7 @@ namespace yii\widgets;
 use yii\base\Component;
 use yii\helpers\Html;
 use yii\base\Model;
+use yii\helpers\JsExpression;
 
 /**
  * @author Qiang Xue <qiang.xue@gmail.com>
@@ -60,15 +61,39 @@ class ActiveField extends Component
 
 	public function begin()
 	{
+		$inputID = Html::getInputId($this->model, $this->attribute);
+		$attribute = Html::getAttributeName($this->attribute);
+
+		$validators = array();
+		foreach ($this->model->getValidators($attribute) as $validator) {
+			/** @var \yii\validators\Validator $validator */
+			if (($js = $validator->clientValidateAttribute($this->model, $attribute)) != '') {
+				$validators[] = $js;
+			}
+		}
+		$jsOptions = array(
+			'name' => $this->attribute,
+			'container' => ".field-$inputID",
+			'input' => "#$inputID",
+			'error' => '.help-inline',
+		);
+		if ($validators !== array()) {
+			$jsOptions['validate'] = new JsExpression("function(attribute, value, messages) {" . implode('', $validators) . '}');
+		}
+		$this->form->attributes[$this->attribute] = $jsOptions;
+
+
 		$options = $this->options;
 		$class = isset($options['class']) ? array($options['class']) : array();
-		$class[] = 'field-' . Html::getInputId($this->model, $this->attribute);
+		$class[] = "field-$inputID";
-		if ($this->model->isAttributeRequired($this->attribute)) {
+		if ($this->model->isAttributeRequired($attribute)) {
 			$class[] = $this->form->requiredCssClass;
 		}
-		if ($this->model->hasErrors($this->attribute)) {
+		if ($this->model->hasErrors($attribute)) {
 			$class[] = $this->form->errorCssClass;
 		}
+
+
 		$options['class'] = implode(' ', $class);
 		return Html::beginTag($this->tag, $options);
 	}

framework/widgets/ActiveForm.php

@@ -11,6 +11,7 @@ use Yii;
 use yii\base\Widget;
 use yii\base\Model;
 use yii\helpers\Html;
+use yii\helpers\Json;
 
 /**
  * ActiveForm ...
@@ -41,17 +42,20 @@ class ActiveForm extends Widget
 	 */
 	public $errorSummaryCssClass = 'yii-error-summary';
 	/**
-	 * @var boolean whether to enable client-side data validation.
-	 * Client-side validation will be performed by validators that support it
-	 * (see [[\yii\validators\Validator::enableClientValidation]] and [[\yii\validators\Validator::clientValidateAttribute()]]).
-	 */
-	public $enableClientValidation = true;
-	/**
 	 * @var array the default configuration used by [[field()]] when creating a new field object.
 	 */
 	public $fieldConfig = array(
 		'class' => 'yii\widgets\ActiveField',
 	);
+
+	/**
+	 * @var boolean whether to enable client-side data validation.
+	 * Client-side validation will be performed by validators that support it
+	 * (see [[\yii\validators\Validator::enableClientValidation]] and [[\yii\validators\Validator::clientValidateAttribute()]]).
+	 */
+	public $enableClientValidation = true;
+	public $enableAjaxValidation = false;
+
 	/**
 	 * @var string the CSS class that is added to a field container when the associated attribute is required.
 	 */
@@ -69,13 +73,22 @@ class ActiveForm extends Widget
 	 */
 	public $validatingCssClass = 'validating';
 
+	public $validationUrl;
+	public $validationDelay;
+	public $validateOnChange;
+	public $validateOnType;
+
+	public $attributes = array();
+
 	/**
 	 * Initializes the widget.
 	 * This renders the form open tag.
 	 */
 	public function init()
 	{
+		if (!isset($this->options['id'])) {
 			$this->options['id'] = $this->getId();
+		}
 		echo Html::beginForm($this->action, $this->method, $this->options);
 	}
 
@@ -85,11 +98,18 @@ class ActiveForm extends Widget
 	 */
 	public function run()
 	{
-		$id = $this->getId();
+		$id = $this->options['id'];
-		$options = array();
+		$options = array(
-		$options = json_encode($options);
+			'enableClientValidation' => $this->enableClientValidation,
+			'enableAjaxValidation' => $this->enableAjaxValidation,
+			'errorCssClass' => $this->errorCssClass,
+			'successCssClass' => $this->successCssClass,
+			'validatingCssClass' => $this->validatingCssClass,
+		);
+		$options = Json::encode($options);
+		$attributes = Json::encode($this->attributes);
 		$this->view->registerAssetBundle('yii/form');
-		$this->view->registerJs("jQuery('#$id').yii.form($options);");
+		$this->view->registerJs("jQuery('#$id').yiiActiveForm($attributes, $options);");
 		echo Html::endForm();
 	}