Client-side validation and confirmation

How to set which happens first...

[bhonda]

Hey,

Got myself into a little bit of a pickle.

Here's my situation - I have a form, with a submit button. I have client-side validation on many fields. I also have a confirmation box ('Are you sure?' Yes/No) when you click the button.

PROBLEM: You fill out some of the form, click the button, it asks you 'Are you sure', you click yes, then the validation kicks in, and says I haven't filled out all the fields.

How do I set the order in which client-side stuff happens, so it does the validation, and only when that is ok, the confirmation box is shown? My validators are asp.net validators, and the confirmation box is done by adding an 'OnClick' attribute to the submit button.

Has anyone got any suggestions? I always get a little hazy when it comes to fiddling with JavaScript, so a little guidance would be greatly appreciated!

Cheers,

B

[oxbaker]

you cannot attach the Popup window to the onClick event as it will always fire before the server-side validators. what you do is on the event for your submit button do some C# or VB that says

if(IsValid){
//put code here to call javascript function to
// popup the screen.
}

hth,
mcm

[bhonda]

Cheers,

I had a look at your method, and it does seem to make sense, however in my current situation, I really want to avoid as many postbacks as possible (got a stupidly large page, but it'll have to do for now!) so, just in case anyone stumbles across this post with the same problem, here's how I did it....

Basically, I add the OnClick attribute to the button to display the confirmation box, as usual...

btnAdd.Attributes.Add("OnClick", "javascript:return confirm('Are you sure you want to add this company?');");

...but I only want this to appear if the validation passes, so I explicitly call the client-side validation when the confirmation button is being called....

btnAdd.Attributes.Add("OnClick", "javascript:if (Page_ClientValidate()) { return confirm('Are you sure you want to add this company?'); } return true;");

...like that.

I'm checking to see if the page passes the validation, and if it does, it shows the confirmation box, else, it just returns true, and all my validation messages are displayed.

This is probably really obvious, but took me ages to figure it out, so it's useful to have this all in one place!

Cheers,

B