ASP.NET Validation styling - asp.net

I'm using ASP.NET WebForms and using some validation like the following:
<asp:TextBox runat="server" ID="txtUserName" CssClass="Email" /><br />
<asp:RequiredFieldValidator runat="server" ID="rfvUserName" Display="Dynamic" ControlToValidate="txtUserName" ErrorMessage="Please enter your email address" CssClass="Error" />
<asp:RegularExpressionValidator Enabled="false" runat="server" ID="revUserName" Display="Dynamic" ControlToValidate="txtUserName" ErrorMessage="Please enter a valid email address" ValidationExpression="<%$ Resources:Global, RegExEmail %>" />
What I want to do is instead of just showing a message below in the form of a span I would like to alter the textbox itself, such as add a red border around it and change its background to have an error icon. How do I do this? Thanks.

what about ValidatorCallout? It looks nice and let you add custom CSS class to validated field when it's content is invalid.Also it's a part of popular Ajax Toolkit by Microsoft.

Related

ASP.NET Required Field Validator & Custom Validator not working

This is my aspx code
<p class="input-block last">
<asp:TextBox ID="uxEmployerName" runat="server" CssClass="uxemail" TabIndex="10" ValidationGroup="EmployerRegister" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="uxEmployerName" ErrorMessage="You must enter Company Name." EnableClientScript="false" Display="none" ValidationGroup="EmployerRegister" />
</p>
<p class="input-block last">
<asp:TextBox ID="uxEmail" runat="server" CssClass="uxemail" TabIndex="16" ValidationGroup="EmployerRegister" />
<asp:RequiredFieldValidator ID="uxEmailValReq" runat="server" ControlToValidate="uxEmail" ErrorMessage="You must enter Email." EnableClientScript="false" Display="none" ValidationGroup="EmployerRegister" />
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="The 'Email Address' you have entered does not appear to be a valid address." ControlToValidate="uxEmail" EnableViewState="False" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="EmployerRegister" Display="None" />
</p>
<p class="input-block last">
<asp:LinkButton runat="server" ID="uxRegisterButton" Text="Submit" CausesValidation="true" ValidationGroup="EmployerRegister" CssClass="button" TabIndex="18" />
<a class="button" href="#" tabindex="17">Edit package</a>
</p>
the only validator works here is RegularExpressionValidator
if I input wrong email format then it shows the error message. but not if i leave the email field.
What am i doing wrong. any solution
i have also added a custom validator with the email field
<asp:CustomValidator ID="uxEmailValUnique" runat="server" ErrorMessage="It appears that you already have an account with us. <br/><a href='forgotten-password.aspx'>Request password</a>"
ControlToValidate="uxEmail" EnableViewState="False" ValidationGroup="EmployerRegister"
Display="None" />
the backend server code for this is
Private Sub uxEmailValUnique_ServerValidate(ByVal source As Object, ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs) Handles uxEmailValUnique.ServerValidate
args.IsValid = Not LocalHelper.EmailExists(uxEmail.Text)
End Sub
where in LocalHelper file
Shared Function EmailExists(email As String) As Boolean
Return DB.GetInteger("select count(id) from [user] where deleted = 0 and active = 1 and email = #email", DB.SIP("email", email)) > 0
End Function
this does not work either
what am i doing wrong.
I assume that you have a ValidationSummary control similar to this:
<asp:ValidationSummary runat="server" ForeColor="Red" ValidationGroup="EmployerRegister" />
If any of your validators has client-side validation enabled (EnableClientScript="true", the default value), it will prevent the postback when the client validation fails, so that server-side validation will not be performed. In your current code, the RegularExpressionValidator has client-side validation enabled (not explicitly disabled, in fact); if it fails, the server-side validation for the required fields is not performed and the other error messages are not displayed.
You could disable the client-side validation for all your validators. The message would appear for all of them (if appropriate) every time you submit the form.
<asp:RequiredFieldValidator ID="uxEmployerNameValReq" EnableClientScript="false" ... />
<asp:RequiredFieldValidator ID="uxEmailValReq" EnableClientScript="false" ... />
<asp:RegularExpressionValidator ID="uxEmailExprVal" EnableClientScript="false" ... />
<asp:CustomValidator ID="uxEmailValUnique" EnableClientScript="false" ... />
Another reasonable approach could be to enable the client-side validator for the most basic requirements, and disable it for the CustomValidator. The more advanced validation does not make much sense if the e-mail is empty or not valid in the first place.
<asp:RequiredFieldValidator ID="uxEmployerNameValReq" EnableClientScript="true" ... />
<asp:RequiredFieldValidator ID="uxEmailValReq" EnableClientScript="true" ... />
<asp:RegularExpressionValidator ID="uxEmailExprVal" EnableClientScript="true" ... />
<asp:CustomValidator ID="uxEmailValUnique" EnableClientScript="false" ... />
N.B. In your question, you say that the validation message is not displayed when the e-mail field is empty. I haven't seen that behavior with your original code in my tests.

Required and RegularExpression Validators taking up space

I'm having issues with asp.net's field validators taking up space on my page. I've searched around, and documentation says to use Display="Dynamic" to keep the validators from taking up space. When I use this however, the error messages are always displayed.
What am I doing wrong?
I just want the error messages to display when the user either clicks the "Save" button, or loses focus on a textbox. And I don't want the validators to take up space.
<p>Please enter a new email:</p>
<asp:TextBox runat="server" MaxLength="255" ID="TextBoxEmail" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
ValidationGgroup="Email"
ErrorMessage="Please enter an email"
ControlToValidate="TextBoxEmail" runat="server"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator2"
ValidationGroup="Email"
ControlToValidate="TextBoxEmail"
ErrorMessage="Please enter valid email"
runat="server"
ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" />
<p>Please re-enter your email:</p>
<asp:TextBox runat="server" ID="TextBoxEmail2" />
<asp:LinkButton ValidationGroup="Email" runat="server" Text="Save" OnClick="linkbuttonSave_Click" />
Only thing I notice in your code is you have a typo in ValidationGgroup="Email". It should be ValidationGroup="Email"
Other than that, Display="Dynamic" works for me.
After clicking, submit button -
<p>
Please enter a new email:</p>
<asp:TextBox runat="server" MaxLength="255" ID="TextBoxEmail" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ValidationGroup="Email"
ErrorMessage="Please enter an email" ControlToValidate="TextBoxEmail" runat="server"
Display="Dynamic"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator2" ValidationGroup="Email"
ControlToValidate="TextBoxEmail" ErrorMessage="Please enter valid email" runat="server"
ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" Display="Dynamic" />
<p>
Please re-enter your email:</p>
<asp:TextBox runat="server" ID="TextBoxEmail2" />
<asp:CompareValidator ID="PasswordCompare" runat="server" ControlToCompare="TextBoxEmail"
ControlToValidate="TextBoxEmail2" CssClass="failureNotification" Display="Dynamic"
ErrorMessage="Must match." ValidationGroup="Email"></asp:CompareValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" ValidationGroup="Email"
ErrorMessage="Please enter an confirm email" ControlToValidate="TextBoxEmail2" runat="server"
Display="Dynamic"></asp:RequiredFieldValidator>
<asp:LinkButton ID="LinkButton1" ValidationGroup="Email" runat="server" Text="Save"
OnClick="linkbuttonSave_Click" />
You can set the property Display to "Dynamic" or "none", the second one will cause the Error message to be displayed only in the validation summary.
I got it to work great by deleting the "ValidationGroup=.." . Havent looked what up what this does but it works great without it and not sure why it would be needed (given the validator controls have the control id of the email textbox)

Multiple ASP.NET validators

I have an ASP.NET page with the following code.
<asp:TextBoxEx ID="CompSCEmail" MaxLength="100" runat="server"></asp:TextBoxEx> <asp:RegularExpressionValidator Display="Dynamic" ID="RegSubmitCompSCEmail" runat="Server" ControlToValidate ="CompSCEmail" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" ErrorMessage="(*)"></asp:RegularExpressionValidator>
<asp:ImageButton ID="SubmitButton" SkinID="submitButton" OnClick="SubmitButton_Click"
Action="Submit" ValidationGroup="submit" runat="server" VisibleOnRecall="false" />
<asp:ImageButton ID="SaveButton" SkinID="saveButton" OnClick="SaveButton_Click" Action="Save" runat="server" Visible="true" VisibleOnRecall="makerfirst" />
I want to validate the format of the email when the user click both "Submit" and "Save" button. Does anyone know how to do that?
Thank You.
Give your RegularExpressionValidator ValidationGroup Property.
On click of both of your Buttons call Page.Validate("yourvalidationgroup").
This way you can validate email on click of both the buttons.

ASP.NET:Required Field Validator not working

I've got a weird problem that i don't understand why it happened.
I made a content page so a user can send me a message to my email and made a few TextBox's that are linked to some validators.
when i first made the page i hed 1 Regular Expression validator and every thing worked out fine like i planed it, But then i decided to delete the Regular Expression validator and now i got a problem with the Required Field validator.
when i press submit the page do a post back like there isn't any validators on the page.
I'm pretty sure I'm missing something (I'm pretty new at asp.net)
here is the markup:
<!-- Regular Expression Validtor for the Name Text Box
<asp:RegularExpressionValidator ID="NameExpressionValidator1" runat="server" ControlToValidate="nameTextBox"
ValidationExpression="[אבגדהוזחטיכלמנסעפצקרשתץףןם\s\.]*" Display="Dynamic"> </asp:RegularExpressionValidator> -->
<!--The Name Text Box -->
<asp:TextBox ID="nameTextBox" class="TextBoxes" runat="server"
AutoPostBack="True" ValidationGroup="g" ></asp:TextBox> <span class="infoText">:שם</span>
<!-- Required Field Validator for the Name Text Box -->
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="nameTextBox"
Display="Dynamic" ValidationGroup="g" ErrorMessage="please enter your name"></asp:RequiredFieldValidator>
<br />
<br />
<!-- Phone Text Box -->
<asp:TextBox ID="phoneTestBox" class="TextBoxes" runat="server"
AutoPostBack="True" ValidationGroup="g" ></asp:TextBox> <span class="infoText">:טלפון</span>
<!-- Requierd Field Validator Phone Text Box -->
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="phoneTestBox"
Display="Dynamic" ValidationGroup="g" ErrorMessage="please enter your phone"></asp:RequiredFieldValidator>
<br />
<br />
<asp:TextBox ID="messagTextBox" runat="server" class="TextBoxes" TextMode="MultiLine"
Text="asdasdadasdasdasd"></asp:TextBox> <span class="infoText">:הודעה</span>
<asp:Button ID="button" runat="server" Text="send message" ValidationGroup="g" />
You should not use HTML comments to comment out server side controls but <%-- --%>:
<%--
<asp:RegularExpressionValidator ID="NameExpressionValidator1" runat="server" ControlToValidate="nameTextBox"
ValidationExpression="[אבגדהוזחטיכלמנסעפצקרשתץףןם\s\.]*" Display="Dynamic"> </asp:RegularExpressionValidator>
--%>
http://msdn.microsoft.com/en-us/library/4acf8afk.aspx
Is there any specific use of AutoPostBack="True" in textbox? if not then just remove it from all textboxes, also you need to give ValidationGroup="g" for only validator controls, there is no need to give it in textbox controls.
first of all, ensure the validation group of the validation summary matches?
If that's correct try using validation method:
protected void Page_Load(object sender, EventArgs e)
{
Validate();
}

ASP.NET: ValidationSummary doesn't display any contents

I'm trying to figure out how the heck the validation summary control of ASP.NET (3.5 I think) works.
<asp:ValidationSummary ID="vldSummary" runat="server" DisplayMode="BulletList"
CssClass="error" EnableClientScript="true" />
<asp:RequiredFieldValidator ID="vldSubject" ControlToValidate="txtSubject"
EnableClientScript="false" Text="You must enter a subject." runat="server" />
<asp:RequiredFieldValidator ID="vldMessage" ControlToValidate="txtMessage"
EnableClientScript="false" runat="server" Text="You must enter a message." />
It seems that no matter what I do, the validation summary remains empty (but is rendered) and the errors are only displayed at the position of each respective validator.
What am I doing wrong?
Text property's value is what is displayed beside the control. You need to set the ErrorMessage property of the validators to control what is shown in the summary.
You want to set the ErrorMessage property on your validation controls. This text will be displayed by the ValidationSummary control.
Try:
<asp:ValidationSummary ID="vldSummary" runat="server" DisplayMode="BulletList" CssClass="error" EnableClientScript="true" />
<asp:RequiredFieldValidator ID="vldSubject" ControlToValidate="txtSubject" EnableClientScript="false" ErrorMessage="You must enter a subject." runat="server" />
<asp:RequiredFieldValidator ID="vldMessage" ControlToValidate="txtMessage" EnableClientScript="false" runat="server" ErrorMessage="You must enter a message." />
Set the ErrorMessage property on the RequiredFieldValidators, not the Text property.
<asp:RequiredFieldValidator ID="vldSubject" ControlToValidate="txtSubject" EnableClientScript="false" ErrorMessage="You must enter a subject." runat="server" />
<asp:RequiredFieldValidator ID="vldMessage" ControlToValidate="txtMessage" EnableClientScript="false" runat="server" ErrorMessage="You must enter a message." />

Resources