CODEWITHSUNDEEP
javascriptc#asp.netvb.netrequiredfieldvalidator
chrisblue13
chrisblue13

Reputation: 373

Asp:Net Required field turn control back color red for validation groups

I have successfully been able to turn the back colour of controls red if validation if a required field triggered. However I can't get it work for controls in groups.

I have this js in each of my pages just before the closing body tag

function WebForm_OnSubmit() {
 if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() ==false) {
  for (var i in Page_Validators) {
    try {
        var control = document.getElementById(Page_Validators[i].controltovalidate);
        if (!Page_Validators[i].isvalid) {
            control.className = "ErrorControl";

        } else {
            control.className = "";
        }
    } catch (e) {
        var r = 0;
    }
}
return false;
}
return true;
}

the following css class for the Error styling.

.ErrorControl
{
    background-color: #FBE3E4;
    border: solid 1px Red;
}

Here is an example of a control in a validation group

<asp:RequiredFieldValidator runat="server" ID="vldTelephoneNumber" ControlToValidate="txtTelephoneNumber" ValidationGroup="ResellerGroup"></asp:RequiredFieldValidator>

Any help with this would be appreciated

Upvotes: 0

Views: 403

Answers (1)

VDWWD
VDWWD

Reputation: 35554

This is the javascript function I use to change the border and background color of the element that is being validated or is deemed invalid when the submit button is clicked. It will only turn the element red of the specific validation group, not all the elements that have a validator.

It also turn the colors back to normal when the validaton has succeeded and the focus is lost.

<script type="text/javascript">
    $(document).ready(function () {
        if (typeof (Page_Validators) !== 'undefined') {
            //check the elements at a regular interval to change the color back to normal
            setInterval(function () { fieldValidators() }, 100);
        }
    });

    function fieldValidators() {
        if (typeof (Page_Validators) !== 'undefined') {
            for (var i = 0; i < Page_Validators.length; i++) {
                var val = Page_Validators[i];
                var ctrl = document.getElementById(val.controltovalidate);
                if (ctrl != null && ctrl.style != null) {
                    if (!val.isvalid) {
                        $(ctrl).addClass("ErrorControl");
                    } else if ($(ctrl).hasClass("ErrorControl")) {
                        $(ctrl).removeClass("ErrorControl");
                    }
                }
            }
        }
    }
</script>

Upvotes: 1

Related Questions