How do I highlight a textbox border red when it is

Question

What property do I use on the required field validator control to make the textbox red if there is a validation error?

Here is my code:

<asp:Label ID="lblFirstName" runat="server" AssociatedControlID="txtFirstName" Text="First Name:" CssClass="reg-labels" />
<br />
<asp:TextBox ID="txtFirstName" runat="server" CausesValidation="true" MaxLength="60" CssClass="standard_width"/>
<asp:RequiredFieldValidator ControlToValidate="txtFirstName" runat="server" ID="valFirstName" ValidationGroup="grpRegistration" ErrorMessage="First Name is required." Text="*" />

Answer 1

Without overloading anything, give your <asp:*Validator tags a CssClass="garbage" attribute.

In your style sheet, create

.garbage {
    display: none;
}
.garbage[style*=visible] + input,
.garbage[style*=visible] + select,
.garbage[style*=visible] + textarea {
    background-color: #ffcccc;
    border: 1px solid #ff0000;
}

and any form control immediately preceded by a validator will be highlighted on invalid data.

EDIT:

I've seen a few methods for forcing a redraw in Chrome, including a pure css solution: transform: translateZ(0);

Answer 2

Murali's answer works great, but I rolled a jQuery version for myself if anyone's interested.

Based on the official documentation (https://msdn.microsoft.com/en-us/library/yb52a4x0.aspx), I was able to get each validator and check to see if it isvalid, and if not, use the errormessage property to populate my own notification system (setStatusMessage() is a function I wrote, feel free to use any other type of status message prompt, like alert() or roll your own).

/*
*   Validation Catcher - Sean D Kendle - 9/24/2015
*   Catch validation events and add to status messages system
*/
$(document).on("submit", function () {
    $.each(Page_Validators, function (i, v) {
        var strControlToValidateID = v.controltovalidate;
        var $controlToValidate = $("#" + strControlToValidateID);

        var arrInvalidControls = new Array(); //collection of all invalid field ids for later

        if (!v.isvalid) {
            $controlToValidate.addClass("error"); //custom error class, optional
            $controlToValidate.css("border-color", "#D00"); //manually set border-color per OP's question

            $(".error").eq(0).focus(); /*set focus to top-most invalid field on error, or you can use the v.focusOnError property to check if validator has this set (string "t" if true), but I don't want to have to set this every time*/

            arrInvalidControls.push(strControlToValidateID);  //collect all invalid field ids for later

            $(v).addClass("redtext"); //custom class - allows me to make all errors red without having to add a ForeColor property to every validator

            setStatusMessage(v.errormessage, "red", -1); // setStatusMessage is a function I wrote, replace with another alert system if desired, or delete this line
        } else {
            /*the following prevents control being seen as valid if there are two or more validators for the control - example:  required field validator, then custom or regex validator (first would be invalid, second would be valid for empty field)*/
            if (!$.inArray(strControlToValidateID, arrInvalidControls)) {
                $controlToValidate.removeClass("error");
                $controlToValidate.css("border-color", "");
            } else {
                //console.log(strControlToValidateID + " is already invalid.");
            }
        }
    });
});

I hope this helps someone!

Answer 3

Murali's answer worked for me as data changes, but on postback all the fields rendered as though there were no validation errors. I found that ASP.NET lazy-loads ValidatorUpdateDisplay, so the client-side override doesn't take effect until after it's already passed its onload validation. I'm guessing there's either a version or an implementation difference that blocked me here, but other solutions (including a few with CSS) weren't working either.

Eventually, I came upon a solution that combines Murali's answer with Dillie-O's solution from here: Change Text Box Color using Required Field Validator. No Extender Controls Please

<div class="pad-left">
  <asp:CompareValidator ID="comvIncTaxable" runat="server" ControlToValidate="tbIncTaxable" Display="Dynamic" Operator="DataTypeCheck" Type="Currency" CssClass="red-border"
     ErrorMessage="Please enter a currency value.">
     <span></span>
  </asp:CompareValidator>
  <asp:TextBox runat="server" ID="tbIncTaxable"></asp:TextBox>
</div>

<script type="text/javascript">
$(function () {
    setValidatedBordersOnLoad();
});
function ValidatorUpdateDisplay(val) {
    if (typeof (val.display) == "string") {
        if (val.display == "None") {
            return;
        }
        if (val.display == "Dynamic") {
            val.style.display = val.isvalid ? "none" : "inline";
            if (val.className == 'red-border' && val.controltovalidate) {
                if (val.isvalid) {
                    document.getElementById(val.controltovalidate).style.border = '1px solid #ccc';
                }
                else {
                    document.getElementById(val.controltovalidate).style.border = '1px solid red';
                }
            }
            return;
        }
    }
    val.style.visibility = val.isvalid ? "hidden" : "visible";
}

function setValidatedBordersOnLoad()
{
    for (var i = 0; i < Page_Validators.length; i++)
    {
        var val = Page_Validators[i];
        if (val.className == 'red-border' && val.controltovalidate) {
            var ctrl = document.getElementById(val.controltovalidate);
            if (ctrl != null && ctrl.style != null) {
                if (!val.isvalid)
                    ctrl.style.border = '1px solid red';
                else
                    ctrl.style.border = '1px solid #ccc';
            }
        }
    }
}
</script>

The nice thing about this solution is it lets you cherry-pick which validators get this special handling simply by adding CssClass='red-border' to the validator. In my case, I only wanted this behavior on fields within a specific grid where cell positioning shouldn't change, but still wanted to use out-of-box functionality elsewhere on the form.

Answer 4

ASP.Net web forms internally uses a Javascript frameworka located at aspnet_client\{0}\{1} folder to handle the validation, etc. They are basically determined from the property ClientScriptsLocation

Try overriding the default framework function by keeping it in your page includes additional line to set the control_to_validate color

document.getElmentById(val.controltovalidate).style.border='1px solid red';

<asp:TextBox ID="txtFirstName" runat="server" CausesValidation="true" MaxLength="60"
    CssClass="standard_width" />
<asp:RequiredFieldValidator ControlToValidate="txtFirstName" runat="server" ID="valFirstName" ValidationGroup="grpRegistration" ErrorMessage="First Name is required." Text="*" />
<asp:Button Text="Super" ID="btnSubmit" CausesValidation="true" runat="server" />

JS

<script type="text/javascript">
    function ValidatorUpdateDisplay(val) {
        if (typeof (val.display) == "string") {
            if (val.display == "None") {
                return;
            }
            if (val.display == "Dynamic") {
                val.style.display = val.isvalid ? "none" : "inline";
                return;
            }

        }
        val.style.visibility = val.isvalid ? "hidden" : "visible";
        if (val.isvalid) {
            document.getElementById(val.controltovalidate).style.border = '1px solid #333';
        }
        else {
            document.getElementById(val.controltovalidate).style.border = '1px solid red';
        }          
    }
</script>

Answer 5

Well, to your disappointment there isn't a direct way (cf https://stackoverflow.com/a/5249021/145682)

However, you can make use of a CustomValidator. Here is one way to define it:

<asp:TextBox ID="txtbx" runat="server"></asp:TextBox>
<asp:CustomValidator ID="customValidator" 
    runat="server" ValidationGroup="submit" ControlToValidate="txtbx" 
    ClientValidationFunction="foo" ErrorMessage="*"></asp:CustomValidator>

Make note of the ClientValidationFunction. It has to be written as follows:

    function foo(sender, e) {
        var value = e.Value;
        console.log('Value: ', e.Value);
        var ctrlid = sender.controltovalidate;
        var targetControl = document.getElementById(ctrlid);
        if (vowels.indexOf(value[0].toLowerCase()) == -1) {
            console.log('true-executed');
            e.isValid = false;
            targetControl.style.borderColor = 'red';
        }
        else {
            console.log('else-executed');
            e.isValid = true;
            targetControl.style.borderColor = '';
        }
    }

The controltovalidate property of sender will give you the id of the control you are looking for; in other words, your ControlToValidate. And, Value property of e should give you the target control's value.

The other option, is you can write your own server control to do the job: http://msdn.microsoft.com/en-us/library/aa719624(v=vs.71).aspx