JQuery ajax not working for specific input string parameter "<?"

Question

I'm making a JQuery ajax call with a string input parameter as below. But whenever the input parameter value is "<?", the ajax call fails without even hitting the controller method in the service layer.

But this works fine, for all input values like "<", "?", "<*" etc.. This is breaking only for this input "<?".

In the controller service method, if i hard code the input parameter value to "<?", this provides me the expected result. Only when i pass this value from JQuery ajax this is breaking.

$.ajax({
                url: '/Profile/ValidateAccountName',
                type: 'GET',
                dataType: 'json',
                async: false,
                data: {
                    accountName: $('#account-name').val()
                },
                cache: false,
                success: function (result) {
                    if (!result) {
                        isValid = false;
                        errMsg = "Account name has invalid characters";
                    }
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.error("Service call failed during ValidateAccountName() execution. ")
                }
            });

Please let me know what am i missing here.

Answer 1

? is a special character and is a marker for starting a new URL parameter. You need to use encodeURIComponent method to send such special characters like below,

$.ajax({
                url: '/Profile/ValidateAccountName',
                type: 'GET',
                dataType: 'json',
                async: false,
                data: {
                    accountName: encodeURIComponent($('#account-name').val())
                },
                cache: false,
                success: function (result) {
                    if (!result) {
                        isValid = false;
                        errMsg = "Account name has invalid characters";
                    }
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.error("Service call failed during ValidateAccountName() execution. ")
                }
            });