Accessibility and Usability at Penn State

Skip to Demo

Alert Box Examples

Section Content

This page includes working examples of different JavaScript functions relating to alert boxes and is located away from the main site. To return to the main site, go to the Alert Boxes page.

Error Validation Alert Box

In the next example, Javascript is used to trigger an alert box indicating input errors. 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.

Sample Entry Form

To test the alert box, leave blank or enter invalid parameters in the boxes below and click on the SUBMIT button. An error message will be generated in an alert box.

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)

The code below includes a script tiggered by a Submit event that checks that the username includes only the appropriate characters, then generates an alert box as needed.

View The Code

HTML Form

<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>
</form>

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(!re.test(form.username.value))
{ alert("Error: Username must contain only letters, numbers and underscores!");
form.username.focus(); flag = false; return false; }

if(flag == true) return true;
else return false;
}
</script>

 

Multiple Errors in Alert Boxes Example

This example generates a single alert box reporting multiple errors. This enhances usability for all users because it streamlines error reporting.

HTML Form

Input 2 or more of the following invalid parameters to generate an alert box containing multiple error messages:

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)

This script includes checks for different possible validation errors.

View The Code

<form ... onsubmit="return checkForm3(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)</p>

<p><label for="Password">Password: </label>
<input id ="Password" type="password" name="pwd1" /></p>

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

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

JavaScript Code

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; }
}
</script>

Top of Page