JavaScript Required Form Field v.2

 

This script will remind you with permanent on screen text, if you do not fill in a required field. Very useful, because other then the alert function, the reminder will stay displayed until the user fills in the required field.

If you decide you want to use or alter the script to suit your needs, please give your support and leave a link to this site, thanks.

Try it out!

 

Example

Your Name: (Required)
Required: Please enter you name
Your Email: (Required)
Required: Please enter your email address

 

Script Source

 

<The Form >

<form onSubmit="return checkForm();" method=post action="">
<span class=label>Your Name: </span><input type=text value="" id=name><br>
<div class=error id=nameError>Required: Please enter you name<br></div>
<span class=label>Your Email: </span><input type=text value="" id=email><br>
<div class=error id=emailError>Required: Please enter your email address<br></div><br />
<input type="submit" value="Try it out!" /> <input type="reset" value="Reset" />
</form>

 

<The CSS >

<style>

.error {
font-family: arial;
font-size: 10pt;
color: green;
margin-left: 50px;
display:none;
}

</style>

 

<The JavaScript >

<script>
function checkForm() {
name = document.getElementById("name").value;
email = document.getElementById("email").value;

if (name == "") {
hideAllErrors();
document.getElementById("nameError").style.display = "inline";
document.getElementById("name").select();
document.getElementById("name").focus();
return false;
} else if (email == "") {
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
document.getElementById("email").focus();
return false;
}
return true;
}

function hideAllErrors() {
document.getElementById("nameError").style.display = "none"
document.getElementById("emailError").style.display = "none"
}
</script>

Please let me know if this script was helpful to you.

[rating]