For these examples JavaScript is used to trigger an alert box indicating form input errors.

Sample Entry Form

Below is a sample form in which an error box is generated if the Username field is left blank.
To test the alert box, leave blank or enter invalid parameters in the Username field below and click on the SUBMIT button. An error message will be generated in an alert box.

Note: Username must be filled in.

View the Code: Sample Form

Note that the event trigger is a SUBMIT event which is device neutral, meaning that it occurs whether the user clicks the button or presses the ENTER key to trigger the action.

The code for the form includes the LABEL tag and TABINDEX=0 on the instructions. The validation is triggered by the onsubmit action which works with either a click or pressing ENTER on the Submit button.


<form ... onsubmit="return checkForm(this);">
<label for="Username">Username:</label> <input id ="Username" type="text" name="username" />
<p tabindex="0">Username must contain at least 6 characters including one upper case letter (A-Z), one lower case letter(a-z), and one number(0-9)<b style="color:#C16"></b></p>
<p><input type="submit" /></p>

In the JavaScript, the function checkForm returns an alert message when the username field in the form is blank. The code can include additional validation checks such as length of username or ensuring that only legal characters are used.

JavaScript Code

<script type="text/x-javascript">
function checkForm(form) {
var flag = true;
if(form.username.value == "")
{ alert("Error: Username cannot be blank!");
form.username.focus(); flag = false; return false; }
if(flag == true) return true;
else return false;

Multiple Errors in Alert Boxes Example

This example generates a single alert box reporting multiple errors including blank fields, non-matching passwords and invalid usernames. This enhances usability for all users because it streamlines error reporting.


To test this form, input two or more of the following invalid parameters to generate an alert box containing multiple error messages:

  • Leave Username blank
  • Enter invalid characters in Username
  • leave Password blank
  • Enter non-matching text in the Password and Confirm Password fields

Username must contain at least 6 characters including one upper case letter (A-Z), one lower case letter(a-z), and one number(0-9)

View the Code: Multiple Errors


The form is structured similarly to the previous form.

<form ... onsubmit="return checkForm3(this);">

<p tabindex="0">Username must contain at least 6 characters including one upper case letter (A-Z), one lower case letter(a-z), and one number(0-9)</p>

<label> for="Username">*Username:</label><br>
<input id ="Username" type="text" name="username" /><br>
<label for="Password">Password: </label><br>
<input id ="Password" type="password" name="pwd1" /><br>

<label for="Confirm">Confirm Password:</label><br>
<input id = "Confirm" type="password" name="pwd2" /><br>

<input type="submit" /></p>

JavaScript Code

This script includes checks for different possible validation errors and compiles the alerts into one alert message.

script type="text/x-javascript">
function checkForm3(form) {
var alertText = "";
var flag = true;

if(form.username.value == "")
{ alertText += "Error: Username cannot be blank!\n";
form.username.focus(); flag = false; }

if(form.username.value != "" && !re.test(form.username.value))
{ alertText += "Error: Username must contain only letters, numbers and underscores!\n";
form.username.focus(); flag = false; }

if(form.pwd1.value == "")

{ alertText += "Error: passwords cannot be blank.\n ";
form.pwd1.focus(); flag = false; }

if(form.pwd1.value != form.pwd2.value)
{ alertText += "Error: passwords do not match.\n ";
form.pwd1.focus(); flag = false; }

if(flag == true) return true;
else { alert(alertText); return false; }

Top of Page