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.
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.
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>
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;
}
</script>
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.
HTML Form
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
View the Code: Multiple Errors
HTML Form
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>
</form>
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; }
}
</script>