Checking variables with JavaScript before submitting the information

Trying to speed up my site and maintain accessibility

[Jeremy_H]

I have a form on my site where once the user fills in the information and presses submit, it gets sent to a PHP script for processing.

What I want to do is when the person presses the submit button, a JavaScript program checks the information to make sure it's valid. If it is valid, then the form gets sent to the PHP script. If the form is not valid, then the form is not sent and the user gets an alert box telling them to fix such and such field.

The thing is, it's very important to me that if the user does not have JavaScript enabled, that the form is still able to be sent. (Then, if the information isn't valid, they will get an informative error from the PHP.)

The reason I'm trying to do this is to speed up my site and maintain complete accessibility.

Does anybody know if this is possible? Thanks.

[Fotiman]

<form onsubmit="return validateForm()" ...>

Then, in your validateForm function, check the form values. If you encounter one that's invalid, do the alert and then return false. That should prevent the form from submitting. And for users with JavaScript disabled, your form will always be submitted.

Hope that helps.

[adni18]

You'll definitely want to set up those same restrictions in PHP. If your user has JS turned off, they could easily bypass the security measures if you don't back them up in PHP, too.

[kaled]

In general, validation is possible with javascript but without details, it's impossible to comment on the difficulty. For instance, checking numbers fall within a given range is easy, but checking that a zip code is valid is something else altogether.

Kaled.

[Jeremy_H]

Thanks so much, you guys rock!

Kaled, it's just a simple check I've already written to make sure some numbers fall within certain ranges. I can see how ZIP codes matching cities or something like that could be pretty difficult/lame. Thanks for the heads up.

Not to make things too difficult, but my form is turning into a funky Mr. Potato Head. I know it's probably not common, but my form will have three submit buttons. [webmasterworld.com...] Each type of submit button will have it's own check. Does anybody see any road-bumps if I put the onsubmit="return validateForm()" attribute onto the submit buttons instead of the form?

Thanks again.

[Fotiman]

If you want it on the submit button instead, then you would remove the onsubmit from the form tag, and instead you would make it an onclick event handler for the submit button.

<input type="submit" onclick="return validateForm()" ...>

[Jeremy_H]

Awesome! Works great, thanks Fotiman.