JavaScript error " ) expected " in IE 11 & below + AJAX not working in IE 11

Question

I have a script in which an ajax call is being made like this:

(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;

        }
    };
})();
})();

This is basically a simple "contact us" form. So the user fills in contact information and the question. Then the form is submitted to the server (an asp.net mvc controller) and the response (json), in the form a thank you message, is shown in a Bootstrap modal and it fades away after 5 seconds automatically.

Now this is working fine in all browsers except IE 11 and below (yes we have to support these browsers as we have users in some countries where these browsers are in use).

The problem is that when the form is submitted in IE, it doesn't show the modal rather it asks the user to download (that little save or open message at the bottom of the IE window) the json content. The only error in the IE console is ") expected". While I have checked the code so many times and there is no missing ")" in it (or did I overlook?).

These could be problems inter-connected or maybe something is missing in the ajax request block so the IE does not show the modal and instead presents the user an option to download the json content and this parenthesis error is related to something else.

Need help!

Edit: Now this is the complete code. Some code was in another JS file and I have merged them together here so it looks same as it does in the Chrome's sources view.

Answer 1

The function definition for setErrorMsgAndClass has some default parameter values.

... function (el, errorEl, nameOfClass = '', errorMsg = '') { ... }

Unfortunately no version of Internet Explorer can handle default parameters like that, refer to the Default Parameters Browser Compatibility Table.

Instead you could use "old style" default parameters similar to:

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

There are other examples of ways to handle default parameters such that older browsers have no problems on the rest of the MDN page linked above.