11

I'm having an issue with a standard ASP.NET page that has a TextBox and a RequiredFieldValidator. The steps to reproduce are quite simple:

  1. Place a TextBox on a page
  2. Place a RequiredFieldValidator on the page
  3. Point the RequiredFieldValidator at the TextBox
  4. Run the app
  5. Tab away from the TextBox the RequiredFieldValidator does not show
  6. Enter text, then delete the text and THEN tab away, the RequiredFieldValidator does show

The RequiredFieldValidator works fine in both cases after a postback, however it seems the client-side code isn't firing until something is entered into the textbox (and then deleted).

Does anyone have a solution to this without hacking away at JavaScript myself?

Improve this question

8 Answers 8

Reset to default
4

Is it possible this behavior is by design to suppress the appearance of validation controls until user input?

Generally speaking, Validate() gets called whenever a control is clicked that has CausesValidation set to true, like a submit button.

In any case, a poor mans work around, you could call the page Validate() function from the Load event handler. This will make things clearer to tab happy users that they need to enter something in. E.g.

protected void Page_Load(object sender, EventArgs e) { Validate(); }
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I don't believe this is by design. The user has highlighted the TextBox and has moved focus away from it. They will be informed it is incorrect after clicking the submit button, however they should be informed straight away.
Calling Page.Validate() is an option, however I believe this is less desirable as it means the page will automatically seem "invalid" to the user.
It seems to me that all the validators work this way. If you think its a bug in the framework, perhaps you might consider opening a microsoft connect bug?
I take your point, however, if the form is empty, then it is invalid, is it not?
Dont get me wrong I agree, but I think this is where ASP.NET leaves off and where AJAX toolkits kick in.
|
4

A follow-up to my previous answer:

Validation occurs in the onchange event, rather than the onblur. onchange fires when the focus is lost AND the control value has changed.

To trigger validation in the onblur event, I added the following code in the Page_Load():

ScriptManager.RegisterStartupScript(this, GetType(), "js" + myTextBox.ClientID, "ValidatorHookupEvent(document.getElementById(\"" + myTextBox.ClientID + "\"), \"onblur\", \"ValidatorOnChange(event);\");", true);

Works in ASP.Net 2.

Improve this answer

Comments

3

You may be creating a usability issue here. If you validate mandatory fields on blur, the user will get a lot of "Required Field" errors just because he's tabbing through the fields.

Improve this answer

Comments

2

did you set the EnableClientScript attribute/property to true? do you have a default value for the text box? if so you need to set the InitialValue property to that default value

Improve this answer

1 Comment

EnableClientScript is true. There is no default value and InitialValue is definitely nothing. I'd be interested for someone else to create a blank page and try this to see if they get the same result as I do.
0

A form can contain several validation groups. AFAIK validation is only triggered through a post-back, activating the validators of the corresponding validator group. Only after the post-back does the validator add its client-side Javascript validation code.

Improve this answer

1 Comment

If I enter some text, delete it and then tab away, the client-side JavaScript validation code fires correctly and warns me. Also, most other validators work fine and fire their client-side validation code correctly.
0

Thats just how the validators work, they don't fire unless there was input to validate or there was a postback. You'll have to do the validation firing yourself if you want it to happen.

I don't know the exact code you'll need but it'll have to do with handling onblur and overriding evaluation function:

function blurred(sender) { var validator = sender.Validators[0] validator.evaluationfunction(validator); }

and on the textbox:

<asp:TextBox runat="server" ID="txt" onBlur="blurred(this)"></asp:TextBox>
Improve this answer

2 Comments

Thanks Sontek. I don't think the JavaScript would be too hard to add (as you showed there) however I just wanted to check if there were any alternatives before going down that route :)
you don't have to do this to get client side validation on the textbox
0

I had the same issue. Discovered that you need need to add some framework script references to your script manager. Make sure you have at least these script references withing "script" tags in your script manager.

 <asp:ScriptManager ID="ScriptManager1" runat="server" ValidateRequestMode="Enabled" > <Scripts> <%--Framework Scripts--%> <%--<asp:ScriptReference Name="MsAjaxBundle" />--%> <asp:ScriptReference Name="jquery" /> <asp:ScriptReference Name="jquery.ui.combined" /> <asp:ScriptReference Name="WebForms.js" Path="~/Scripts/WebForms/WebForms.js" /> <asp:ScriptReference Name="WebUIValidation.js" Path="~/Scripts/WebForms/WebUIValidation.js" /> <asp:ScriptReference Name="WebFormsBundle" /> <%--Site Scripts--%> </Scripts> </asp:ScriptManager>

You can find those as well in the default master page created by .Net when you create a webforms application.

Improve this answer

Comments

0

Set the "CausesValidation" to true for the button.

For this kind of issue, do not forget the button type.

You have to set the "CausesValidation" to true, for this to validate without having to write up javascript manually. This is the client side of validation.

You can set validation from the code behind as well but this is enough.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.