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

score 1 · Accepted Answer · edited May 23 '17 at 12:06

1

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;
 }
});

edited May 23 '17 at 12:06

Community

1
1

answered Jul 29 '15 at 11:14

gideon

19,329
11
72
113

at `performValidation()` which validations should I call ?? – Nad Jul 29 '15 at 11:19
Put all the validation code inside there to check _"x field is required"_ ... (You could also call your already written validiation functions like `checkBoxChecking()` but they be should be modified to return a false if the validation fails and you should call them by doing `return checkBoxChecking();` – gideon Jul 29 '15 at 11:20
can you show me how to do it,as I am confused a bit. Please see here http://jsfiddle.net/022tdvm3/ also how to call this function – Nad Jul 29 '15 at 11:23
What you linked should work. What exactly is happening. Do you see errors. etc? I've updated my answer with more code. – gideon Jul 29 '15 at 11:32
With my code, the page gets submitted without any validation messages. Let me try your updated code – Nad Jul 29 '15 at 11:33
how to debug js code ?? I have no idea how to debug it – Nad Jul 29 '15 at 11:35
Google for "developer tools" for the browser you're on, then you'll see a code window to put break points and debug. – gideon Jul 29 '15 at 11:37
OK, wel do that, And your updated code is also not working – Nad Jul 29 '15 at 11:37
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/84566/discussion-between-nadeem-and-gideon). – Nad Jul 29 '15 at 11:39
@gideom: now validation is firing, but when I fill all the data, my `onClick` stops working. strange – Nad Jul 29 '15 at 12:20

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

1 Answers1