RequiredFieldValidator have to click twice

Question

I have run into the same problem as described here.

Only the question is marked as answered with only an explanation as to why you may have to click twice when using a RequiredFieldValidator on input fields - once as the blur of a textbox(for example) will correct the validation and then again to actually post the form.

I don't want to have to click a button twice! Does anyone know a solution or workaround to this?

Camus

Just a quick one but have you tried use Page.Validate("validationGroup") in the code behind the button click, does the same issue still occur? – Tripletail

will give that a try and see what happens, thanks – Camus

it's just a rough stab in the dark really. If you want to avoid using a magic string you could use myControl.ValidationGroup. That's if it works that is. – Tripletail

only problem is that it has already posted back at this point and i want to use the RequiredFieldValidator to prevent that from happening unless the fields are valid – Camus

Answer 1

Apologies for not posting code previously I assumed this to be a standard problem with the RequiredFieldValidator, but have since realised my particular problem was coming from a CompareValidator, used to ensure entered passwords matched.

The CompareValidator was causing the issue that I described, causing me to have to click away from the field to blur and validate, before being able to click on the post button.

I'm not sure why but changing the Display of the CompareValidator from Dynamic to Static has cleared the problem up.

Camus

I came across this thread in 2014 and tried setting the Display on all of my validators to Static - still have the same behavior, curiously enough, on all of my "Cancel" buttons which have CausesValidation set to False. It appears in my case to be linked to some additional JavaScript I've attached to the companion "Save" buttons that calls Page_ClientValidate() and then checks Page_IsValid. I'll have to dig into it more at a later date... – Pebbly

Try adding Page_BlockSubmit = false; to the Cancel button. Page_ClientValidate() sets it true, so your first click sets it false, and the second submits. If you set it false, it will post back on the first click. – Symposiac

A message to the future Web Searcher: Also check that your ErrorMessage property is not blank or missing. I wanted the message inline so I placed it between the tags. Placing it in both the property and between the tags solved it for me. I had Display to Dynamic and EnableClientScript set to True. Changing those, as suggested here, didn't fix the problem. Adding the error message did. – Wickham

Answer 2

You could add EnableClientScript=false to the validator.

That prevents the client-side validation, so you will always get a postback (which may not exactly be what you want, though). The validation will still be done, just server-side.

Be sure to wrap the button-click logic in a if (Page.IsValid) { ... }, to check the status of the validators.

Tache

Answer 3

If the validator is Display="Dynamic", and the appearance of the error message causes the submit button to move, then the MouseUp event is not received by the submit button. In this case, the validation fires and clears the error message, but the submit button does not fire. To solve the problem, either set the the validators to be Display="Static", or rearrange the form so that the submit button does not move when error messages appear.

Here's a way to reserve about one, vertical line of space for a dynamic validation message:

<div style="height:1.5em;overflow:visible;"> <asp:RequiredFieldValidator ID="R1" runat="server" ErrorMessage="Name is required" ControlToValidate="TextBoxName" Display="Dynamic"></asp:RequiredFieldValidator> </div>

I did not find it necessary to set EnableClientScript="false", although that did help for a CustomValidator that had no client-side validation function implemented.

Canadianism

Answer 4

Posting your code is always a good idea, That way we could run your code in a test environment and modify it to ensure it works before posting our answer.

I would suggest adding

causesValidation="true" 

to your button to see if that works.

Terriss

Isn't that the default value? – Phylogeny

I'm not sure if its the default value. on MSDN for the control there is no mention of that. msdn.microsoft.com/en-us/library/… – Terriss

When you click though on the property, you get here, which does state that true is the default. – Phylogeny

Answer 5

I have a better idea.

Add Text="" to textbox Control.
Add InitialValue="" to Validator Control.
What it will do, when it will be posting, it will find the value of the text box is still the initail value and it will throw an error and the form will not be posted.

Try this:

<asp:RequiredFieldValidator ID="reqFieldCloseComment" ControlToValidate="tbCloseComment" ValidationGroup="ChangeStatus" ErrorMessage="Please enter a reason" Display="Dynamic" runat="server" InitialValue=""></asp:RequiredFieldValidator>
            <asp:TextBox ID="tbCloseComment" runat="server" CausesValidation="true" TextMode="MultiLine" Height="107px" Width="400px" Text=""></asp:TextBox>

        <asp:Button ID="btnCloseRequestFinal" Text="Finish" CssClass="CloseReqButton" runat="server" ValidationGroup="ChangeStatus" />

Kinny

Answer 6

Here is code that is working fine for me and helping to get rid of double click.

  <asp:TextBox ID="TextBox1" runat="server" autocomplete="off" 
        Enabled="true" MaxLength="20" onfocus="SetActiveControl(this);" Text=""
        CausesValidation="true"  />

<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
    runat="server" ControlToValidate="TextBox1" Display="Static" ErrorMessage="Ha!" SetFocusOnError="True" EnableClientScript="true" ForeColor="" InitialValue="" />

Oligocene

Answer 7

$(function() {
$("input.btn").on("click",function(){
if(Page_BlockSubmit == true) {Page_BlockSubmit = false};
})
});

Page_BlockSubmit is a JS variable defined by the js generated from code behind when you define the validator . I haven't went deeper to know why MS need this variable, but the scenario is：

the first click will make Page_BlockSubmit become false. the second click will check the value of Page_BlockSubmit and return true.

if you implemented the code I posted, every time you click the button, the variable will be set as false which will trigger the submit at every click.

And, you can use google chrome to trace the value of Page_BlockSubmit.

Sophronia