yii.activeForm.js 18.3 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
    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,
47 48 49 50 51 52
        // a pre-request callback function on AJAX-based validation. The signature of the callback should be:
        // function ($form, jqXHR, textStatus)
        ajaxBeforeSend: undefined,
        // a function to be called when the request finishes on AJAX-based validation. The signature of the callback should be:
        // function ($form, jqXHR, textStatus)
        ajaxComplete: undefined,
Qiang Xue committed
53 54 55 56 57
        // 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
58

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

Qiang Xue committed
86 87 88 89 90 91 92
    var methods = {
        init: function (attributes, options) {
            return this.each(function () {
                var $form = $(this);
                if ($form.data('yiiActiveForm')) {
                    return;
                }
Qiang Xue committed
93

Qiang Xue committed
94 95 96 97 98 99 100 101 102 103 104 105 106
                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
107

Qiang Xue committed
108
                watchAttributes($form, attributes);
Qiang Xue committed
109

Qiang Xue committed
110 111 112 113 114
                /**
                 * 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
115

Qiang Xue committed
116 117 118 119
                if (settings.validateOnSubmit) {
                    $form.on('mouseup.yiiActiveForm keyup.yiiActiveForm', ':submit', function () {
                        $form.data('yiiActiveForm').submitObject = $(this);
                    });
120
                    $form.on('submit.yiiActiveForm', methods.submitForm);
Qiang Xue committed
121 122 123
                }
            });
        },
Qiang Xue committed
124

Qiang Xue committed
125 126
        destroy: function () {
            return this.each(function () {
Qiang Xue committed
127
                $(this).unbind('.yiiActiveForm');
Qiang Xue committed
128 129 130
                $(this).removeData('yiiActiveForm');
            });
        },
Qiang Xue committed
131

Qiang Xue committed
132 133 134
        data: function () {
            return this.data('yiiActiveForm');
        },
Qiang Xue committed
135

Qiang Xue committed
136 137 138 139 140 141 142 143 144 145 146 147 148 149
        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
150

Qiang Xue committed
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 181 182 183 184 185 186
            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
187

Qiang Xue committed
188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210
        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
211

Qiang Xue committed
212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232
    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
233

Qiang Xue committed
234 235
    var validateAttribute = function ($form, attribute, forceValidate) {
        var data = $form.data('yiiActiveForm');
Qiang Xue committed
236

Qiang Xue committed
237 238 239 240 241 242 243 244 245 246 247 248
        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
249

Qiang Xue committed
250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272
        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);
    };
Alex-Code committed
273 274 275 276 277 278 279 280 281
    
    /**
     * Returns an array prototype with a shortcut method for adding a new deferred.
     * The context of the callback will be the deferred object so it can be resolved like ```this.resolve()```
     * @returns Array
     */
    var deferredArray = function () {
        var array = [];
        array.add = function(callback) {
Alex-Code committed
282
            this.push(new $.Deferred(callback));
Alex-Code committed
283 284 285 286
        };
        return array;
    };
    
Qiang Xue committed
287 288 289 290 291 292 293 294 295
    /**
     * 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,
Alex-Code committed
296
            messages = {},
Alex-Code committed
297
            deferreds = deferredArray();
Qiang Xue committed
298

Qiang Xue committed
299 300 301
        $.each(data.attributes, function () {
            if (data.submitting || this.status === 2 || this.status === 3) {
                var msg = [];
Alex-Code committed
302
                messages[this.id] = msg;
Qiang Xue committed
303 304
                if (!data.settings.beforeValidate || data.settings.beforeValidate($form, this, msg)) {
                    if (this.validate) {
Alex-Code committed
305
                        this.validate(this, getValue($form, this), msg, deferreds);
Qiang Xue committed
306
                    }
Alex-Code committed
307
                    if (this.enableAjaxValidation) {
Qiang Xue committed
308 309 310 311 312
                        needAjaxValidation = true;
                    }
                }
            }
        });
Qiang Xue committed
313

Alex-Code committed
314
        $.when.apply(this, deferreds).always(function() {
Alex-Code committed
315 316 317 318 319 320
            //Remove empty message arrays
            for (var i in messages) {
                if (0 === messages[i].length) {
                    delete messages[i];
                }
            }
Alex-Code committed
321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364
            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,
                    complete: function (jqXHR, textStatus) {
                        if (data.settings.ajaxComplete) {
                            data.settings.ajaxComplete($form, jqXHR, textStatus);
                        }
                    },
                    beforeSend: function (jqXHR, textStatus) {
                        if (data.settings.ajaxBeforeSend) {
                            data.settings.ajaxBeforeSend($form, jqXHR, textStatus);
                        }
                    },
                    success: function (msgs) {
                        if (msgs !== null && typeof msgs === 'object') {
                            $.each(data.attributes, function () {
                                if (!this.enableAjaxValidation) {
                                    delete msgs[this.id];
                                }
                            });
                            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 {
Qiang Xue committed
365
                successCallback(messages);
Alex-Code committed
366 367
            }
        });
Qiang Xue committed
368
    };
Qiang Xue committed
369

Qiang Xue committed
370 371 372 373 374 375 376 377 378 379 380
    /**
     * 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
381

Qiang Xue committed
382 383 384 385 386
        if (data.settings.afterValidate) {
            data.settings.afterValidate($form, attribute, messages);
        }
        attribute.status = 1;
        if ($input.length) {
387
            hasError = messages && $.isArray(messages[attribute.id]) && messages[attribute.id].length;
Qiang Xue committed
388 389 390
            var $container = $form.find(attribute.container);
            var $error = $container.find(attribute.error);
            if (hasError) {
391
                $error.text(messages[attribute.id][0]);
Qiang Xue committed
392 393 394 395 396 397 398 399 400 401 402
                $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
403

Qiang Xue committed
404 405 406 407 408 409 410 411 412
    /**
     * 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
413

Qiang Xue committed
414 415
        if ($summary.length && messages) {
            $.each(data.attributes, function () {
416 417
                if ($.isArray(messages[this.id]) && messages[this.id].length) {
                    $ul.append($('<li/>').text(messages[this.id][0]));
Qiang Xue committed
418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446
                }
            });
            $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
447

448
})(window.jQuery);