Change Background color of asp controls on form submit validation fails

Question

On a webpage i have 3 dropdown controls and few textboxes with a required field validators.

I want to highlight the controls for which the value is not specified. May be set the border color or background color.

How can i achieve this? i want it only on page submit.

Kindly help!

Code sample with two rows having two controls and a submit button

                        <tr>
                            <td bgcolor="#ffffff" width="500px">
                                &nbsp;
                                <asp:Label ID="lblcategory" runat="server" Text="Category of Incident" Width="250px"></asp:Label>
                                <asp:DropDownList ID="ddlincident" runat="server" Width="200px" ValidationGroup="validatePortal"
                                    CssClass="select">
                                </asp:DropDownList>
                            </td>
                            <td style="vertical-align: top; width: 10px">
                                <asp:Label ID="Label8" Text="*" ForeColor="Red" runat="server"></asp:Label>
                                <asp:RequiredFieldValidator ID="rfvddlincident" runat="server" ControlToValidate="ddlincident"
                                    ValidationGroup="validatePortal" Display="None" ForeColor="Red" InitialValue="0"
                                    SetFocusOnError="true"></asp:RequiredFieldValidator>
                            </td>
                            <td style="vertical-align: top">
                                <asp:Label ID="Label2" runat="server" CssClass="instructiontext"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td bgcolor="#ffffff" width="500px">
                                &nbsp;
                                <asp:Label ID="lblplace" runat="server" Text="Where Did the Incident Take Place"
                                    Width="250px"> </asp:Label>
                                <asp:TextBox ID="txtplace" MaxLength="50" runat="server" Width="200px" CssClass="textbox"></asp:TextBox>
                            </td>
                            <td style="vertical-align: top; width: 10px">
                                <asp:Label ID="Label9" Text="*" ForeColor="Red" runat="server" Style="vertical-align: top"></asp:Label>
                                <asp:RequiredFieldValidator ID="txttxtplace" runat="server" ControlToValidate="txtplace"
                                    ValidationGroup="validatePortal" Display="None" ForeColor="Red" SetFocusOnError="true"></asp:RequiredFieldValidator>
                            </td>
                            <td style="vertical-align: top">
                                <asp:Label ID="Label3" runat="server" CssClass="instructiontext"></asp:Label>
                            </td>
                        </tr>

                    <asp:Button ID="Button2" runat="server" Text="Next" ValidationGroup="validatePortal"
                        OnClick="next_clicked" CssClass="hoverbuttonblue" UseSubmitBehavior="false" />

Answer 1

The way to do it is by overriding the WebFOrm_OnSubmit function that gets called when the ASP.NET validation works.

Do this

Step 1: Add this to somewhere in your stylesheet ( To create a new style rule for textboxes with errors )

.errorMessage{border: 1px solid #f00; background-color: #0ff;}

Step 2: Place the below script just after the form tag. ( The override comes here )

function WebForm_OnSubmit() {
    var retValue = true;
    if (ValidatorOnSubmit && !ValidatorOnSubmit()) {
        for (var i = 0; i < Page_Validators.length; i++) {
            var validator = Page_Validators[i];
            document.getElementById(validator.controltovalidate).className = validator.isvalid ? "" : "errorMessage";
            if (!validator.isvalid)
                retValue = false;
        }
    }
    return retValue;
}

Answer 2

With RequiredFieldValidator you can not add your custom code. You will have to use custom validation instead. Here is a good link for how to use custom validation.
customvalidator for dropdownlist not being invoked (apparently)

Answer 3

there are two ways you can do this:

1 way:

To achieve this functionality you need to write custom java script functions for validating control. if the validation is false change background color of control other wise keep it as it is.

2 way: Use custom validator for validation and if validation is false then change controls background color. but this is server side validation for client side validation you must use java script functions for validation.

Answer 4

Validation event for asp net client side validation

Take a look at link above. That is how you can catch validation on client side. That is with jQuery. But you may do same thing with regular JS. How handler will be actually assigned to your form depends on you. In question I have linked above it is done with jQuery. But you can use pure JS: https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

var form = document.getElementById("our_form_id");
if (el.addEventListener) {
  form.addEventListener('submit', highlightFields, false); 
} else if (el.attachEvent)  {
  form.attachEvent('onsubmit', highlightFields);
}
function highlightFields() {
            if (typeof Page_Validators != 'undefined') {                
                for(var i = 0; i < Page_Validators.length; i++){
                    if (!Page_Validators[i].isvalid) {
                       document.getElementById(Page_Validators[i].controltovalidate).style.border = "solid 1px red";
                    }
                }

            }
        }

I've similar code in one of my projects and it works fine. Here Page_Validators is a list of all <asp:....Validator controls on client side Page_Validators[i].controltovalidate contains an id of an element it belongs too.