ASP.NET Validation Controls and Javascript Confirm boxes

Question

I have a page using .NETs server-side input validation controls. This page also has a javascript confirm box that fires when the form is submitted. Currently when the Submit button is selected, the javascript confirm box appears, and once confirmed the ASP.NET server-side validation controls are fired. I would like to fire the server-side validation controls BEFORE the javascript confirm box is displayed.

How can this be accomplished? Ive included a sample of my current code below.

sample.aspx

<asp:textbox id=foo runat=server />
<asp:requiredfieldvalidator id=val runat=server controltovalidate=foo />
<asp:button id=submit runat=server onClientClick=return confirm('Confirm this submission?') />

sample.aspx.vb

Sub Page_Load()
    If Page.IsPostback() Then
        Page.Validate()

        If Page.IsValid Then
            'process page here'
        End If
    End If
End Sub

Thanks for any help.

Answer 1

can you not use the EnableClientScript property for the validator control allowing you to carry out the validation on the client side on your submit the validation will then fire??

Answer 2

The thing is that the Return Confirm fires prior to the validator's javascript. which all has to do with lifecycles and stuff.

If you're wanting to definitely have that behavior, what you'll need to do is change all of your validators to custom validators, roll out your own JS validation routines for the custom validators, and then call the confirm at the end of the validation routine as the final call.

if MAY change the sequence of firing, if you add the JS for the return confirm coding to the button in a HIJAX method where it's assigned to the onClick event after the page has been loaded fully into the browser--but I've never utilized that methodology for that capability, so don't quote me there.

Answer 3

I added the EnableClientScript=True property to the validator control. Results stayed the same.

Answer 4

The Validators are fired by a onsubmit handler on the form.

if your override form.onsubmit you'll lose the validator firing, though you may be able to manually provide the JS needed.

Answer 5

Thanks everyone. Rolling my own JS validation and using CustomValidator controls makes sense. I was hoping their was a simpler solution.

Any other ideas?

Answer 6

What about using the ASP.NET Control Toolkit's ValidatorCallout control? From: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ValidatorCallout/ValidatorCallout.aspx

ValidatorCallout is an ASP.NET AJAX extender that enhances the functionality of existing ASP.NET validators. To use this control, add an input field and a validator control as you normally would. Then add the ValidatorCallout and set its TargetControlID property to reference the validator control.

I haven't used this one, but it seems to me that it would get you the client side validation that you want.

Answer 7

Check this,

http://www.codedigest.com/CodeDigest/73-Fire-Validator-Controls-Before-JavaScript-Confirm-Box-Fires-in-ASP-Net-Page.aspx

Answer 8

This seems to be a very common problem.

The workaround:

Validate the page first, then call confirm, as shown here and here. This does have the drawback of calling the validation twice - once in your code, and once in the generated code in the submit onclick.

How to make this work properly, i.e. Validate the page first (and only once), then show the confirm box, I do not yet know.

Edit: Here's a useful suggestion:

What ASP.NET does behind the scenes when validation controls exist, is add an autogenerated onClick event for each button. This OnClick event would supercede the custom OnClick event. So to overcome this I did the following:

1. add CausesValidation = False
2. added Validate() and IsValid code to the onClick event behind the page to simulate the now missing autogenerated validation code behind the button.

Edit 2: A complete example

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="if (Page_ClientValidate()){ return confirm('Do you want to submit this page?')}" CausesValidation="false" />