CODEWITHSUNDEEP
c#asp.netvalidationcustomvalidator
user1067334
user1067334

Reputation: 243

Change color of text box with CustomValidator

I am creating some text boxes at runtime and I would like to change the color of the text box if the text box has been left blank and the user submits the form.

I am using the code behind approach, this is the code I wrote in the .aspx.cs file

textBoxObj is the text box object that I create at runtime and it is the object on which I want the empty validation.

CustomValidator customValidatorObj = new CustomValidator();
customValidatorObj.ControlToValidate = textBoxObj.ID;
customValidatorObj.ClientValidationFunction = "changeColorofTextBox";

and I wrote a small Javascript snippet within the .aspx file which goes as follows (I haven't yet written the logic to change the color, just making it not valid for now)

<script type="text/javascript">
    function changeColorofTextBox(oSrc, args) {
        if (args.Value.length > 0) {
            args.IsValid = true;
        }
        else {
            args.IsValid = false;
        }
    }
</script>

In the submit button click function of the form, I have this check if(Page.IsValid), then submit the form. However, even when the text box is empty, the form gets submitted. It seems like the function is not even being hit. Do you have any pointers on what I am doing wrong? I am fine with either client side or server side validation, whichever works.

EDIT

I got the error, I just had to do this

customValidatorObj.ValidateEmptyText = true;

and it started working.. Thank you, I didn't realize that the customValidator class does not try validating if the control is blank.

But I am stuck again :(

In the form, I have many text boxes. Suppose, the user entered text for 3 of the text boxes and left 2 of them blank, how do I find the text box ids so that I can change the color of only the blank ones. or, how can I write code in the javascript to find out the control ID at runtime?

I know we have to do this

document.getElementById(CONTROLIDGOESHERE).style.backgroundColor = "red";

but how I get the CONTROLIDGOESHERE value to pass to the getElementById function?

Any pointers, thanks.

Upvotes: 0

Views: 2583

Answers (3)

user1067334
user1067334

Reputation: 243

Thank you guys, I figured it out. This code does the job for me

.aspx.cs

    CustomValidator customValidator = new CustomValidator();
    customValidator.ControlToValidate = textBox.ID;
    customValidator.ClientValidationFunction = "changeColorofTextBox";
    customValidator.ValidateEmptyText = true;
    customValidator.EnableClientScript = true;
    e.Item.Controls.Add(customValidator);

.aspx

<script type="text/javascript">
    function changeColorofTextBox(oSrc, args) {
        if (args.Value.length > 0) {
            args.IsValid = true;
        }
        else {
            var ctrlid = oSrc.id;
            var validatorid = document.getElementById(ctrlid);
            ctrlid = validatorid.controltovalidate;
            document.getElementById(ctrlid).style.backgroundColor = "Tomato";
            args.IsValid = false;
        }
    }
</script>

Upvotes: 0

Malice
Malice

Reputation: 3977

Assuming you are running .NET Framework version 4.0 then you could declare your textboxes using ClientIDMode="Static". That way they'll have the same ID client-side and server-side e.g.

<asp:TextBox runat="server" ID="txtName" ClientIDMode="Static" />

Then you could trigger client-side validation on a button click by declaring a button like this:

<input type="submit" id="btnSubmit" onclick="ClientSideValidation(); return false;" value="Save"/>

The JavaScript function could look something like this:

<script type="text/javascript">
    function ClientSideValidation() {
        var txtName = document.getElementById("txtName");
        if (txtName.value.length == 0) {
            txtName.style.background = "#DE0000";
        }
        // Check other text boxes...
    }
</script>

Upvotes: 1

Darren J. McLeod
Darren J. McLeod

Reputation: 146

Try setting customValidatorObj.EnableClientScipt = True

Upvotes: 1

Related Questions