The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>) error not working

Question

I am using some javascript code for validations which are as followed:-

var ErrArr = [];
    $(document).ready(function () {
        $('#btnSave').click(function (e) {
            e.preventDefault();
            validateTitle();
            validateddl();
            validateTextBoxes();
            checkBoxChecking();
            if (ErrArr.length > 0) {
                alert(ErrArr.join("\n"));
                ErrArr = [];
                return false;
            }
        });
        function checkBoxChecking() {
            if ($("#chkDeclaration").is(":checked")) {
                // alert("first button checked");
                return false;
            }
            else {
                ErrArr.push('Check the declaration');
                return true;
            }
        }
        function validateTitle() {
            if ($("#ddlTitle").val() > "0") {
                if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
                    ErrArr.push("Please enter the text in other title");
                }
            } else {
                ErrArr.push('Please select the title');
            }
        }
        function validateTextBoxes() {
            if ($("#txt_emp_fname").val() === "") {
                ErrArr.push('First name is required');
            }
            if ($("#txt_emp_mname").val() === "") {
                ErrArr.push('Middle name is required');
            }
            if ($("#txt_emp_lname").val() === "") {
                ErrArr.push('Last name is required');
            }
            if ($("#txtFatherName").val() === "") {
                ErrArr.push('Father name is required');
            }

            if ($("#txtDateofJoin").val() === "") {
                ErrArr.push('Date of joining is required');
            }

            if ($("#txtReligion").val() === "") {
                ErrArr.push('Religion is required');
            }
            if ($("#txtPersonalEmail").val() === "") {
                ErrArr.push('Email Id is required');
            }
            if ($("#txtDtOfBirth").val() === "") {
                ErrArr.push('Date of birth is required');
            }
            if ($("#txtAt").val() === "") {
                ErrArr.push('Place of birth is required');
            }
            if ($("#txtTaluka").val() === "") {
                ErrArr.push('Taluka is required');
            }
            if ($("#txtPostOffice").val() === "") {
                ErrArr.push('Post office is required');
            }
            if ($("#txtDistrict").val() === "") {
                ErrArr.push('District is required');
            }
            if ($("#txtStatePersonal").val() === "") {
                ErrArr.push('State is required');
            }
            if ($("#txtDtMarriage").val() === "") {
                ErrArr.push('Date of Marriage is required');
            }
            if ($("#TxtPassportNo").val() === "") {
                ErrArr.push('Passport no is required');
            }
            if ($("#txtIdMark").val() === "") {
                ErrArr.push('Identification mark is required');
            }
        }
        function validateddl() {
            if ($("#ddlGender").val === "" || $("#ddlGender").val() == "0") {
                ErrArr.push('Please select the gender');
            }
            if ($("#ddlMaritalStatus").val === "" || $("#ddlMaritalStatus").val() == "0") {
                ErrArr.push('Please select the Marital Status');
            }
            if ($("#ddlNationality").val === "" || $("#ddlNationality").val() == "0") {
                ErrArr.push('Please select the Nationality');
            }
        }
    });

What happens here is, when I use this javascript code, my button click event does not fires. And when I remove the JS code, I get error as

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Here is my aspx code:-

<asp:Button ID="btnSave" CssClass="button" Text="Save" runat="server" CausesValidation="true"
                    OnClick="btnSave_Click" />

Please note, I have searched and tried from other links available from stack and google but I couldn't succeed.

Kindly help

gideon gideon · Accepted Answer · 2015-07-29T11:14:59

You should see this and use the <asp:Button OnClickClick='..' /> property :

See this or this SO post for more.

<asp:Button 
 ID="btnSave" 
 CssClass="button" 
 Text="Save" 
 runat="server" 
 CausesValidation="true" 
 OnClick="btnSave_Click" 
 OnClientClick='return performValidation();'
/>

performValidation will be a master function to call that will run first, you can call your validation functions from within it. You should return false if you don't want to page to be posted.

Eg:

First modify each validation function to return false when the validation fails:

$(document).ready(function () {

function checkBoxChecking() {
    if ($("#chkDeclaration").is(":checked")) {
       return false;
    }
    else {
       ErrArr.push('Check the declaration');
       return false; //return false when any validation fails.
    }
}
function validateTitle() {
    if ($("#ddlTitle").val() > "0") {
        if ($("#ddlTitle").val() == "1104" && $("#txtTitle").val() === "") {
            ErrArr.push("Please enter the text in other title");
        }
    } else {
        ErrArr.push('Please select the title');
        return false;//same here. return false when fail.
    }
}
 //this is your main validation function..
 function performValidation()
 {
    var ret = true;
    ret = checkBoxChecking();
    ret = validateTitle();
    //etc 
    //then ..
    return ret;
 }
});

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>) error not working

1 Answers