jQuery.validator表單驗證外掛remote方法會導致其它的field出現驗證正確的樣式解決方案
阿新 • • 發佈:2021-11-13
原因是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同步請求的方式
這個方式沒弄出來