1. 程式人生 > 其它 >jQuery.validator表單驗證外掛remote方法會導致其它的field出現驗證正確的樣式解決方案

jQuery.validator表單驗證外掛remote方法會導致其它的field出現驗證正確的樣式解決方案

原因是remote採用的是非同步提交,也就是不管最後的結果是true 還是false,都有一定的響應延遲,但是程式程式早已經往下執行了。

解決方案一

直接重寫外掛的remote方法,讓它傳送請求變成同步的即可,主要是新增選項async: false

    $.validator.methods.remote = function (value, element, param, method) {

        // console.log(value,element,param,method);
        if (this.optional(element)) {
            return "dependency-mismatch";
        }


        method = typeof method === "string" && method || "remote";

        var previous = this.previousValue(element, method),
            validator, data, optionDataString;

        if (!this.settings.messages[element.name]) {
            this.settings.messages[element.name] = {};
        }
        previous.originalMessage = previous.originalMessage || this.settings.messages[element.name][method];
        this.settings.messages[element.name][method] = previous.message;

        param = typeof param === "string" && {url: param} || param;
        optionDataString = $.param($.extend({data: value}, param.data));
        if (previous.old === optionDataString) {
            return previous.valid;
        }

        previous.old = optionDataString;
        validator = this;
        this.startRequest(element);
        data = {};
        data[element.name] = value;
        $.ajax($.extend(true, {
            mode: "abort",
            port: "validate" + element.name,
            dataType: "json",
            data: data,
            async: false,
            context: validator.currentForm,
            success: function (response) {
                var valid = response === true || response === "true",
                    errors, message, submitted;

                validator.settings.messages[element.name][method] = previous.originalMessage;
                if (valid) {
                    submitted = validator.formSubmitted;
                    validator.resetInternals();
                    validator.toHide = validator.errorsFor(element);
                    validator.formSubmitted = submitted;
                    validator.successList.push(element);
                    validator.invalid[element.name] = false;
                    validator.showErrors();
                } else {
                    errors = {};
                    message = response || validator.defaultMessage(element, {
                        method: method,
                        parameters: value
                    });
                    errors[element.name] = previous.message = message;
                    validator.invalid[element.name] = true;
                    validator.showErrors(errors);
                }
                previous.valid = valid;
                validator.stopRequest(element, valid);
            }
        }, param));
        return "pending";
    }

方案二:寫一個外掛方法用ajax同步請求的方式

這個方式沒弄出來