yii.activeForm.js 16.6 KB
Newer Older
Qiang Xue committed
1 2 3 4 5 6 7 8 9 10 11 12 13
/**
 * 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 ($) {

Qiang Xue committed
14 15 16 17 18 19 20 21 22 23
    $.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;
        }
    };
Qiang Xue committed
24

Qiang Xue committed
25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
    var defaults = {
        // the jQuery selector for the error summary
        errorSummary: undefined,
        // 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',
        // the URL for performing AJAX-based validation. If not set, it will use the the form's action
        validationUrl: undefined,
        // 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...}
        beforeValidate: undefined,
        // a callback that is called after an attribute is validated. The signature of the callback should be:
        // function ($form, attribute, messages)
        afterValidate: undefined,
        // the GET parameter name indicating an AJAX-based validation
        ajaxParam: 'ajax',
        // the type of data that you're expecting back from the server
        ajaxDataType: 'json'
    };
Qiang Xue committed
52

Qiang Xue committed
53
    var attributeDefaults = {
54 55
        // a unique ID identifying an attribute (e.g. "loginform-username") in a form
        id: undefined,
Qiang Xue committed
56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
        // 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.
        validateOnType: false,
        // 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
79

Qiang Xue committed
80 81 82 83 84 85 86
    var methods = {
        init: function (attributes, options) {
            return this.each(function () {
                var $form = $(this);
                if ($form.data('yiiActiveForm')) {
                    return;
                }
Qiang Xue committed
87

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

Qiang Xue committed
102
                watchAttributes($form, attributes);
Qiang Xue committed
103

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

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

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

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

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

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

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

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

Qiang Xue committed
228 229
    var validateAttribute = function ($form, attribute, forceValidate) {
        var data = $form.data('yiiActiveForm');
Qiang Xue committed
230

Qiang Xue committed
231 232 233 234 235 236 237 238 239 240 241 242
        if (forceValidate) {
            attribute.status = 2;
        }
        $.each(data.attributes, function () {
            if (this.value !== getValue($form, this)) {
                this.status = 2;
                forceValidate = true;
            }
        });
        if (!forceValidate) {
            return;
        }
Qiang Xue committed
243

Qiang Xue committed
244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266
        if (data.settings.timer !== undefined) {
            clearTimeout(data.settings.timer);
        }
        data.settings.timer = setTimeout(function () {
            if (data.submitting || $form.is(':hidden')) {
                return;
            }
            $.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;
                $.each(data.attributes, function () {
                    if (this.status === 2 || this.status === 3) {
                        hasError = updateInput($form, this, messages) || hasError;
                    }
                });
            });
        }, data.settings.validationDelay);
    };
Qiang Xue committed
267

Qiang Xue committed
268 269 270 271 272 273 274 275 276 277
    /**
     * 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
     */
    var validate = function ($form, successCallback, errorCallback) {
        var data = $form.data('yiiActiveForm'),
            needAjaxValidation = false,
            messages = {};
Qiang Xue committed
278

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

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

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

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

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

Qiang Xue committed
377 378
        if ($summary.length && messages) {
            $.each(data.attributes, function () {
379 380
                if ($.isArray(messages[this.id]) && messages[this.id].length) {
                    $ul.append($('<li/>').text(messages[this.id][0]));
Qiang Xue committed
381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409
                }
            });
            $summary.toggle($ul.find('li').length > 0);
        }
    };

    var getValue = function ($form, attribute) {
        var $input = findInput($form, attribute);
        var type = $input.prop('type');
        if (type === 'checkbox' || type === 'radio') {
            var $realInput = $input.filter(':checked');
            if (!$realInput.length) {
                $realInput = $form.find('input[type=hidden][name="' + $input.prop('name') + '"]');
            }
            return $realInput.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;
        }
    };
Qiang Xue committed
410

411
})(window.jQuery);