1. Tech

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/blvalsub2.htm

was emailed to:

Thanks for sharing About.com with others!

Validate on Submit

2. Submit Button

Join the Discussion

Questions? Comments?

Next we'll look at how we need to define the submit button itself to attach the validation to it. We have two alternatives depending on how we want to handle browsers without Javascript support.

Your submit button might look like this:

<input type="submit" value="Submit this form"
onclick="formvalidation('myform');return false;" />

which (provided that the browser has Javascript support) will validate the form and only submit it if it is valid. If the browser does not support Javascript then the form will be submitted without validation. If we want to disable submission in browsers that do not have Javascript enabled then we use an ordinary button calling your validation routine like this:

<input type=" button" name="submitit"
value="Submit this form"
onclick="formvalidation(myform)" />

In this instance we don't need the return false on the end of the onclick as there is no subsequent processing that would be performed.

In both instances (assuming Javascript is enabled) the form will not be directly submitted, instead it will call your formvalidation() routine whenever the button is clicked using the mouse or when the button is selected from the keyboard. With type="submit", browsers that do not support Javascript will submit the form directly without validation. With type="button" the button will not function with Javascript disabled and therefore visitors without Javascript will be unable to use your form. Which of these two options that you choose depends on your requirements.

Next we will take a look at how to submit the form if it is valid.

> 1 | 2 | 3 | 4

Note that the script and the descriptions of the functions that it contains are rewritten from the "Ask Felgall" website with the permission of the copyright owner.

Related Video
Adobe Photoshop Web Button

©2014 About.com. All rights reserved.