我有一个脚本，其中 ajax 调用如下所示:
(function () {
var setup, validation;
var errorMessage = '';
var errorClass = '';
var element = '';
var errorElement = '';
var allOk = true;
var testTelefon = /^[0-9\-+]{2,40}$/;
var testEpostAdress = /^(?!.{65})\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
(function () {
setup = {
init: function () {
this.initSendForm();
},
initSendForm: function () {
var self = this;
$('#helpContactForm').submit(function (event) {
if (allOk) {
var formData = self.getFormData();
var url = $(this).attr("action");
$.ajax({
cache: false,
type: "POST",
url: url,
data: formData,
success: function (data) {
if (data.Success) {
self.resetFormData();
self.showModal(data);
}
},
error: function (data) {
self.showModal(data);
}
});
}
self.hideModal();
event.preventDefault();
});
},
getFormData: function () {
var data = {
'Namn': $('#namn').val(),
'Email': $('#epost').val(),
'Telefon': $('#telefon').val(),
'Fraga': $('#fraga').val()
};
return data;
},
resetFormData: function () {
$('#namn').val(''),
$('#epost').val(''),
$('#telefon').val(''),
$('#fraga').val('')
return true;
},
showModal: function (data) {
$('#messageModalTitle').text(data.Caption);
$("#messageModalBodyText").text(data.Message);
$('#messageModal').modal('show');
return true;
},
hideModal: function () {
setTimeout(function () {
$('#messageModal').modal('hide');
}, 5000);
return true;
}
};
})();
(function () {
validation = {
valideraFormularet: function (errorMsgs) {
var errorMsgsArr = errorMsgs.split(","); //0=> Namn validerings meddel., 1=> Epost, 2=> Telefon, 3=> Fråga
var epost = document.getElementById("epost");
var telefon = document.getElementById("telefon");
this.valideraNamnet(errorMsgsArr[0]);
this.valideraEpostTelefon((errorMsgsArr[1] + ', ' + errorMsgsArr[2]), epost);
this.valideraEpostTelefon((errorMsgsArr[1] + ', ' + errorMsgsArr[2]), telefon);
this.valideraFraga(errorMsgsArr[3]);
return false;
},
valideraNamnet: function (errorMsg) {
var namn = document.getElementById("namn");
var namnError = document.getElementById("namnError");
if (namn.value == "") {
this.setErrorMsgAndClass(namn, namnError, "input-validation-error", errorMsg);
}
else {
this.setErrorMsgAndClass(namn, namnError);
return true;
}
allOk = false;
return false;
},
valideraEpostTelefon: function (errorMsg, ele) {
var result = errorMsg.split(","); //0=> När båda saknas, 1=> När epost saknas, 2=> När telefon saknas
var srcElement = document.getElementById(ele.id);
var epost = document.getElementById("epost");
var epostError = document.getElementById("epostError");
var telefon = document.getElementById("telefon");
var telefonError = document.getElementById("telefonError");
var errorElement = srcElement === epost ? epostError : telefonError;
var validEpost = testEpostAdress.test(epost.value);
var validTelefon = testTelefon.test(telefon.value);
if (epost.value == "" && telefon.value == "") {
this.setErrorMsgAndClass(srcElement, errorElement, "input-validation-error", result[0]);
}
else if (!validEpost && !validTelefon) {
this.setErrorMsgAndClass(srcElement, errorElement, "input-validation-error", srcElement === epost ? result[1] : result[2]);
}
else {
this.setErrorMsgAndClass(srcElement, errorElement);
return true;
}
allOk = false;
return false;
},
valideraTelefon: function (errorMsg) {
var result = errorMsg.split(",");
var telefon = document.getElementById("telefon");
var epost = document.getElementById("epost");
var telefonError = document.getElementById("telefonError");
var validTelefon = testTelefon.test(telefon.value);
if (telefon.value == "" && epost.value == "") {
this.setErrorMsgAndClass(telefon, telefonError, "input-validation-error", result[0]);
}
else if (validTelefon == false) {
this.setErrorMsgAndClass(telefon, telefonError, "input-validation-error", result[1]);
}
else {
this.setErrorMsgAndClass(telefon, telefonError);
return true;
}
allOk = false;
return false;
},
valideraFraga: function (errorMsg) {
var fraga = document.getElementById("fraga");
var fragaError = document.getElementById("fragaError");
if (fraga.value == "") {
fraga.style.borderColor = "#ffb6b6";
this.setErrorMsgAndClass(fraga, fragaError, "input-validation-error", errorMsg);
}
else {
fraga.style.borderColor = "#dddddd";
this.setErrorMsgAndClass(fraga, fragaError);
return true;
}
allOk = false;
return false;
},
setErrorMsgAndClass: function (el, errorEl, nameOfClass = '', errorMsg = '') {
element = el;
errorElement = errorEl;
errorClass = nameOfClass;
errorMessage = errorMsg;
this.setErrorMsgAndClassOnElements();
return false;
},
setErrorMsgAndClassOnElements: function () {
element.className = errorClass;
errorElement.textContent = errorMessage;
this.toggleSubmitBtn();
return false;
},
toggleSubmitBtn: function () {
allOk = errorClass == '' && $('.input-validation-error').length == 0 ? true : false;
if (!allOk)
document.getElementById("btnHelpFormSubmit").disabled = true;
else
document.getElementById("btnHelpFormSubmit").disabled = false;
}
};
})();
})();
这基本上是一个简单的“联系我们”表单。因此用户填写联系信息和问题。然后，表单被提交到服务器(一个 asp.net mvc Controller )，响应(json)以感谢消息的形式显示在 Bootstrap 模式中，并在 5 秒后自动消失。
现在，除了 IE 11 及更低版本之外，这在所有浏览器中都可以正常工作(是的，我们必须支持这些浏览器，因为我们在某些使用这些浏览器的国家/地区有用户)。
问题是，当在 IE 中提交表单时，它不会显示模式，而是要求用户下载(IE 窗口底部的小保存或打开消息)json 内容。 IE 控制台中唯一的错误是“)预期”。虽然我已经检查了代码很多次并且其中没有缺少“)”(或者我忽略了？)。
这些可能是相互连接的问题，或者可能是 ajax 请求 block 中缺少某些内容，因此 IE 不会显示模式，而是向用户提供下载 json 内容的选项，并且此括号错误与其他内容相关。
需要帮助!
编辑:现在这是完整的代码。一些代码位于另一个 JS 文件中，我已将它们合并在一起，因此它看起来与 Chrome 的源代码 View 中的相同。
最佳答案
setErrorMsgAndClass 的函数定义有一些默认参数值。
... function (el, errorEl, nameOfClass = '', errorMsg = '') { ... }
不幸的是，没有任何版本的 Internet Explorer 可以处理这样的默认参数，请参阅 Default Parameters Browser Compatibility Table .
您可以使用“旧式”默认参数，类似于:
var x = function (el, errorEl, nameOfClass, errorMsg) {
nameOfClass = (typeOf nameOfClass != 'undefined') ? nameOfClass : 'Default Class Name';
errorMsg = (typeOf errorMsg != 'undefined') ? errorMsg : 'Default Error Message';
// code
}
x(a,b,c,d); // works
x(a,b); // works using the defaults instead of c/d
还有其他处理默认参数的方法示例，这样旧版浏览器在上面链接的 MDN 页面的其余部分上就不会出现问题。
关于IE 11 及以下版本中的 JavaScript 错误 ") expected "+ AJAX 无法在 IE 11 中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53155834/