Let's say you have a web form and you want to make a couple of the fields required. To keep this as simple as possible we will involve only three fields, "Name", "Email", and "Message". In this example, all three fields will be required.
Here is your initial form:<form method="post" action="whatevermailscript.php">
<input maxlength="256" size="35" name="email">
<p>Comments: <textarea cols="55" name="Comment"> </textarea></p>
<p><input type="submit" value="Send" name="submit">
</form>You might have noticed I didn't put a Reset button in there.
I think they are stupid, so I dont use them.
Now we need to plug in the validation. We do this with good old JavaScript! We will use a function, define the variables (the fields) and call for it on submission (when you click send). So here we go.
Step 1. Add this in your html form page between the <head></head> tags:
<script>
function ValidateContactForm()
{
var name = document.ContactForm.Name;
var email = document.ContactForm.Email;
var comment = document.ContactForm.Comment;
if (email.value == "")
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf("@", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (comment.value == "")
{
window.alert("Please enter a description or comment.");
comment.focus();
return false;
}
return true;
}
</script>Step 2. Add this as an attribute in the form tag:
onsubmit="return ValidateContactForm();"Finished Product<html>
<head>
<title>Form Validation Example</title>
<script>
function ValidateContactForm()
{
var name = document.ContactForm.Name;
var email = document.ContactForm.Email;
var comment = document.ContactForm.Comment;
if (name.value == "")
{
window.alert("Please enter your name.");
name.focus();
return false;
}
if (email.value == "")
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf("@", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0)
{
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (comment.value == "")
{
window.alert("Please provide a detailed description or comment.");
comment.focus();
return false;
}
return true;
}
</script>
</head>
<body>
Use this form to leave a comment:
<form method="post" action="whatevermailscript.php"
name="ContactForm" onsubmit="return ValidateContactForm();">
<p>Name: <input type="text" size="65" name="Name"></p>
<p>E-mail Address: <input type="text" size="65" name="Email"></p>
<p>Comments: <textarea cols="55" name="Comment"> </textarea></p>
<p><input type="submit" value="Send" name="submit">
<input type="reset" value="Reset" name="reset"></p>
</form>
</body>
</html>I hope you will be able to take this example form validator and use it in your own scripts successfully. Enjoy
Show posts