Added: 26 February, 2008
Group: JavaScript
Form field validation with JavaScript
Author: Alex
page: 1

Form field validation with JavaScript

When you create submit forms where users are required to enter some info it's very useful to check if those fields are entered. With this simple JavaScript function we can easily manage form validation.


First we need a form so let's create one:

<form method="post" action="action.php" onsubmit="return validate( );">
<input type="text" name="name">
<input type="submit" name="Submit" value="Submit">
</form>


As you can see in code above this form uses onSubmit event and calling validate JavaScript function. The value we are providing to the script is "Submit" and if that value is sent the JavaScript function is executed.

Now, we need to create the JavaScript function. Place following code in <head> of your webpage.

<script type="text/javascript">
<!--
function validate( )
{
valid = true;

if (document.contact_form.name.value == "")
{
alert ( "Name is required field !" );
valid = false;
}
return valid;
}

//-->
</script>


This code check if form field contains any data and if user skip entering anything alert message displays with information that, in this case, Name field is required.

Next step can be extending this script and adding check for each required field, such as email address or any other necessary data.

Using JavaScript for field validation is easy but it can cause problems because of potential security risk that can allow hackers to bypass it.


GO to: Page 1 : Form field validation with JavaScript


TechTut.com This tutorial is copyrighted. Partial duplication or full duplication is prohibited and illegal. Translation or usage of any kind without authorís permission is illegal.
  • Photo retouch add makeup and create clear face in Photoshop
  • Create low poly house
  • Setting up FTP in windows XP
  • Creating a Flash Photo Slideshow Tutorial
  • Create shadow in Photoshop
  • Drop-Down Menu Tutorial
  • Learn how to create pool in 3D studio
  • Create a realistic chrome car rims
Join our RSS feed
Use our RSS feed to get the latest published tutorials directly to your news reader.
Add to Google
Best tutorials for maya 3d max photoshop and more