I have textbox and two validation (RequiredFieldValidator & RegularExpressionValidator) as bellow
<asp:TextBox runat="server" ID="txtEmailFrom" CssClass="form-control"></asp:TextBox>
<asp:RequiredFieldValidator
ID="RequiredFieldValidator3"
runat="server"
ErrorMessage="Field Required"
ControlToValidate="txtEmailFrom"
Display="Dynamic"
ForeColor="Red"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator
ID="regexEmailValid"
runat="server"
ValidationExpression="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
ControlToValidate="txtEmailFrom"
ForeColor="Red"
Display="Dynamic"
ErrorMessage="Invalid Email Format"></asp:RegularExpressionValidator>
But with error I need the border of field to highlight with red. And for that the code bellow is written:
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';
}
}
The function is working only with RequiredFieldValidatior. I need to work with both (RequiredFieldValidator & RegularExpressionValidator) validation.
Thank you in advance.
Maybe you can set a breakpoint in your javascript function?
I suspect it gets called twice. You are using two validators on your ControlToValidate, one of them is valid, the other invalid. The javascript gets executed once by every validator, it handles both the situation where a validator is not valid, and where one is valid.
So apparently in your case the RequiredFieldValidator 'wins' and gets executed last.
I don't think overriding the framework function ValidatorUpdateDisplay is the right choice here. Given you are using ASP.NET WebForms, maybe an option is to include the Ajax Control Toolkit. It has a ValidatorCallout extension. I assume you could use this extension also without the 'callout', but only the HighlightCssClass-option.
http://www.ajaxtoolkit.net/ValidatorCallout/ValidatorCallout.aspx