Javascript to require form input
The following script is W3C compliant and allows you to require that a visitor enter something in specific form fields before it will be accepted. If they leave a required field blank, it alerts them to the required entry and puts their cursor in the empty field.
It also does a rudimentary check to see if the email address they've submitted is formatted like a valid email address.
Place the following between the <HEAD> and </HEAD> tags at the top of the page:
<script type="text/javascript">
// Require Form Field script
// from Professional Internet
// http://www.proi.net/requireforminput.php
function setFocus(aField) {
document.forms[0][aField].focus();
}
function isAnEmailAddress(aTextField) {
// 1+@3+ [or x@x.x] is as close as we will test
if (document.forms[0][aTextField].value.length<5) {
return false;
}
else if (document.forms[0][aTextField].value.indexOf("@") < 1) {
return false;
}
else if (document.forms[0][aTextField].value.length -
document.forms[0][aTextField].value.indexOf("@") < 4) {
return false;
}
else { return true; }
}
function isEmpty(aTextField) {
if ((document.forms[0][aTextField].value.length==0) ||
(document.forms[0][aTextField].value==null)) {
return true;
}
else { return false; }
}
function validate() {
// will return true or false
// Step 1: check that required fields are
// filled in, alert and exit without
// submitting if not
// check that the name field is valued
if (isEmpty("realname")) {
alert("Please fill in your name.");
setFocus("realname");
return false;
}
// check that the email field is valued
if (isEmpty("email")) {
alert("Please enter your email address.");
setFocus("email");
return false;
}
// check that the company field is valued
if (isEmpty("company")) {
alert("Please enter your company name.");
setFocus("company");
return false;
}
// check that phone field is valued
if (isEmpty("phone")) {
alert("Please enter your phone number.");
setFocus("phone");
return false;
}
// check that url field is valued
if (isEmpty("website")) {
alert("Please enter your web site address.");
setFocus("website");
return false;
}
// Step 2: check that the email address is
// even close, alert and exit without
// submitting if not
if (!isAnEmailAddress("email")) {
alert("The entered email address is invalid.");
setFocus("email");
return false;
}
// if we get this far everthing is ok, so
// let the form submit
return true;
}
</script>
|
Add or subtract the fields you want your script to check. Here is what needs to be changed to make a particular field required:
if (isEmpty("fieldname")) {
alert("Please enter your phone number.");
setFocus("fieldname");
return false;
}
Change the items in red as follows:
Change "fieldname" to the actual field name you want to require
Change the text inside the quotes to the message you want shown when they leave the field blank
Then the form action must be changed to call this script. Use this, changing the script name and location to call YOUR script:
<form action="cgi-bin/submit.pl" method="post" onsubmit="return validate()">
You can see this in action at this page:
http://www.dallas-seo.com/seo-contact.php
|