Ok I have a form validation problem that I need one of you javascript ninja s to help me with.
The following is a form with the javascript that I have used for the last year or two to validate. It works quite nicely and I like the way it works. The problem is I am working on a site where the html needs to validate using STRICT. This form doesn't validate with STRICT because I use a name on the form and not and id. Could someone show me how to do this so that my page will validate using STRICT. I assume you change the name to id on the form, but then I can't then get the javascript to work right.
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function hasValue(theEle ment) {
if (theElement.val ue == "") {
theElement.styl e.background = "#ffcccc";
return false;
}
return true;
}
function is_phone(target ) {
target.value = trim(target.val ue);
var filter = RegExp("^[1-9]{1}[0-9]{2}\-[0-9]{3}\-[0-9]{4}$");
if(filter.test( target.value))//test is used to search for a match of a regular expression in a string
return true;
target.style.ba ckground = "#ffcccc";
return false;
}
function is_email(target ) {
target.value = trim(target.val ue);
var filter = RegExp("^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$");
if(filter.test( target.value))//test is used to search for a match of a regular expression in a string
return true;
target.style.ba ckground = "#ffcccc";
return false;
}
function trim(strText) {
//this will get rid of leading spaces
while (strText.substr ing(0,1) == ' ')
strText = strText.substri ng(1, strText.length) ;
//this will get rid of trailing spaces
while (strText.substr ing(strText.len gth-1,strText.lengt h) == ' ')
strText = strText.substri ng(0, strText.length-1);
return strText;
}
function writeError(theE rror) {
var id = "error";
var x;
if(document.get ElementById) {
x = document.getEle mentById(id);
x.innerHTML = "";
x.innerHTML = theError;
} else if (document.all) {
x = document.all[id];
x.innerHTML = theError;
}
}
function formCheck() {
var noError = true;
var theform = document.Form;
var theError = "";
var len = theform.length;
for (var n=0; n < len; n++) {
if ((theform[n].type == "text"))
theform[n].style.backgrou nd = "white";
}
if (!hasValue(thef orm.fname))
noError = false;
if (!hasValue(thef orm.phone) ||!is_phone(the form.phone))
noError = false;
if (!hasValue(thef orm.email) || !is_email(thefo rm.email))
noError = false;
if (!noError) {
if (theError)
writeError(theE rror);
else
writeError("*Pl ease fill in all required fields.");
}
return noError;
}
</script>
</head>
<body >
<!--Start root -->
<div >
<?php
if(isset($_POST["form"])) {
$fname = htmlspecialchar s($_POST["fname"]);
$phone = htmlspecialchar s($_POST["phone"]);
$email = htmlspecialchar s($_POST["email"]);
?>
<div>
<fieldset >
<legend>Model Call Sign Up</legend>
<p>*Form validates</p>
<p><span>Firs t Name:</span><?php echo $fname; ?></p>
<p><span>Phone: </span><?php echo $phone; ?>
</p>
<p><span>Email: </span><?php echo $email; ?></p>
</fieldset>
</div>
<?php
} else {
?>
<div>
<form name="Form" action="" method="post" enctype="25" >
<fieldset>
<legend>Model Call Sign Up</legend>
<div id="error"></div>
<p><label for="fname">Fir st Name:</label><input type="text" id="fname" name="fname" value="" /></p>
<p><label for="phone">Pho ne:</label><input type="text" id="phone" name="phone" value="" /></p>
<p><label for="email">Ema il:</label><input type="text" id="email" name="email" value="" /></p>
<p id="button">
<input type="submit" name="form" value="Sign Up" onclick="if (formCheck() == false) return false;" />
<input type="reset" />
</p>
</fieldset>
</form>
</div>
<?php
}
?>
</div>
</body>
</html>
[/html]
Thanks for the help.
The following is a form with the javascript that I have used for the last year or two to validate. It works quite nicely and I like the way it works. The problem is I am working on a site where the html needs to validate using STRICT. This form doesn't validate with STRICT because I use a name on the form and not and id. Could someone show me how to do this so that my page will validate using STRICT. I assume you change the name to id on the form, but then I can't then get the javascript to work right.
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function hasValue(theEle ment) {
if (theElement.val ue == "") {
theElement.styl e.background = "#ffcccc";
return false;
}
return true;
}
function is_phone(target ) {
target.value = trim(target.val ue);
var filter = RegExp("^[1-9]{1}[0-9]{2}\-[0-9]{3}\-[0-9]{4}$");
if(filter.test( target.value))//test is used to search for a match of a regular expression in a string
return true;
target.style.ba ckground = "#ffcccc";
return false;
}
function is_email(target ) {
target.value = trim(target.val ue);
var filter = RegExp("^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$");
if(filter.test( target.value))//test is used to search for a match of a regular expression in a string
return true;
target.style.ba ckground = "#ffcccc";
return false;
}
function trim(strText) {
//this will get rid of leading spaces
while (strText.substr ing(0,1) == ' ')
strText = strText.substri ng(1, strText.length) ;
//this will get rid of trailing spaces
while (strText.substr ing(strText.len gth-1,strText.lengt h) == ' ')
strText = strText.substri ng(0, strText.length-1);
return strText;
}
function writeError(theE rror) {
var id = "error";
var x;
if(document.get ElementById) {
x = document.getEle mentById(id);
x.innerHTML = "";
x.innerHTML = theError;
} else if (document.all) {
x = document.all[id];
x.innerHTML = theError;
}
}
function formCheck() {
var noError = true;
var theform = document.Form;
var theError = "";
var len = theform.length;
for (var n=0; n < len; n++) {
if ((theform[n].type == "text"))
theform[n].style.backgrou nd = "white";
}
if (!hasValue(thef orm.fname))
noError = false;
if (!hasValue(thef orm.phone) ||!is_phone(the form.phone))
noError = false;
if (!hasValue(thef orm.email) || !is_email(thefo rm.email))
noError = false;
if (!noError) {
if (theError)
writeError(theE rror);
else
writeError("*Pl ease fill in all required fields.");
}
return noError;
}
</script>
</head>
<body >
<!--Start root -->
<div >
<?php
if(isset($_POST["form"])) {
$fname = htmlspecialchar s($_POST["fname"]);
$phone = htmlspecialchar s($_POST["phone"]);
$email = htmlspecialchar s($_POST["email"]);
?>
<div>
<fieldset >
<legend>Model Call Sign Up</legend>
<p>*Form validates</p>
<p><span>Firs t Name:</span><?php echo $fname; ?></p>
<p><span>Phone: </span><?php echo $phone; ?>
</p>
<p><span>Email: </span><?php echo $email; ?></p>
</fieldset>
</div>
<?php
} else {
?>
<div>
<form name="Form" action="" method="post" enctype="25" >
<fieldset>
<legend>Model Call Sign Up</legend>
<div id="error"></div>
<p><label for="fname">Fir st Name:</label><input type="text" id="fname" name="fname" value="" /></p>
<p><label for="phone">Pho ne:</label><input type="text" id="phone" name="phone" value="" /></p>
<p><label for="email">Ema il:</label><input type="text" id="email" name="email" value="" /></p>
<p id="button">
<input type="submit" name="form" value="Sign Up" onclick="if (formCheck() == false) return false;" />
<input type="reset" />
</p>
</fieldset>
</form>
</div>
<?php
}
?>
</div>
</body>
</html>
[/html]
Thanks for the help.
Comment