I have some older JS code that won’t work with XHTML:
/* This script is working with <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> only */
// A utility function that returns true if a string contains only
// whitespace characters
function isblank(s) {
for(var i = 0; i < s.length; i++) {
var c = s.charAt(i);
if ((c != ' ') && (c != '
') && (c != ' ')) return false;
}
return true;
}
// This is the function that performs form verification. It is invoked
// from the onsubmit event handler. The handler should return whatever
// value this function returns.
function verify(f) {
var msg;
var empty_fields = "";
var errors = "";
// Loop through the elements of the form, looking for all Text and
// Textarea elements that don't have an "optional" property defined.
// Then check for fields that are empty and make a list of them. Also, if
// any of these elements have a "min" or a "max" property defined, verify
// that they are numbers and are in the right range. If the element has a
// "numeric" property defined, verify that it is a number, but don't check
// its range. Put together error messages for fields that are wrong.
for(var i = 0; i < f.elements.length; i++) {
var e = f.elements*;
if (((e.type == "text") || (e.type == "textarea")) && !e.optional) {
// First check if the field is empty
if ((e.value == null) || (e.value == "") || isblank(e.value)) {
empty_fields += "
" + e.name;
continue;
}
// Now check for fields that are supposed to be numeric
// Example: onSubmit="this.Zipcode.numeric=true;return verify(this);"
if (e.numeric) {
var v = parseFloat(e.value);
if (isNaN(v)) {
errors += "- Zipcode needs to be a number.
";
}
if (e.value.length < 5) {
errors += "- You have entered an invalid Zipcode.
";
}
}
}
}
var checkEmail = Guestbook.Email.value
if ((checkEmail.indexOf('@') < 0) || ((checkEmail.charAt(checkEmail.length-4) != '.') && (checkEmail.charAt(checkEmail.length-3) != '.')))
{
errors += "- You have entered an invalid email address.
";
Guestbook.Email.select();
//return false;
}
/*
if (Guestbook.Zipcode.value.length < 5) {
errors += "- You have entered an invalid Zipcode.
";
}
if (Guestbook.State.selectedIndex == 0) {
errors += "- Please select a State or Province.
";
returnStatus = 0;
};
if (Guestbook.Country.selectedIndex == 0) {
errors += "- Please select a Country.";
returnStatus = 0;
};
*/
// Now, if there were any errors, display the messages, and
// return false to prevent the form from being submitted.
// Otherwise, return true.
if (!empty_fields && !errors) return true;
msg = "___________________________________________________
"
msg += "The form was not submitted because of the following error(s).
";
msg += "Please correct these error(s) and re-submit.
";
msg += "___________________________________________________
"
if (empty_fields) {
msg += "- The following required field(s) are empty:"
+ empty_fields + "
";
if (errors) msg += "
";
}
msg += errors;
alert(msg);
return false;
}
Use with a form something like this:
<form action="php/sendmail_post.php " method="post" name="Guestbook" id="Guestbook" onSubmit="return verify(this);">
<table align="center">
<tr>
<td align="right"> </td>
<td align="right"><img src="images/contact_us.png" alt="Contact Us" width="134" height="80" border="0" /></td>
</tr>
<tr>
<td align="right"><span style="color:#0084b5;"><b>First Name</b> *</span></td>
<td align="right"><input type="text" id="First" name="First" size="18" />
</td>
</tr>
<tr>
<td align="right"><span style="color:#0084b5;"><b>Last Name</b> *</span></td>
<td align="right"><input type="text" id="Last" name="Last" size="18" />
</td>
</tr>
<tr>
<td align="right"><span style="color:#0084b5;"><b>E-mail Address</b> *</span></td>
<td align="right"><input type="text" id="Email" name="Email" size="18" />
</td>
</tr>
<tr>
<td colspan="2" align="right"><p style="font-weight:bold;text-align:left;">Please type your message:</p>
<textarea id="Comments" name="Comments" cols="28" rows="6"></textarea>
<p style="text-align:left;">
<!-- <input type="submit" name="submit" value="Submit" class="submit"> -->
<input type="submit" value="Submit" class="submit" />
</p></td>
</tr>
</table>
</form>
Someone previously mentioned the following:
I think the main problem, however, is that you're using the likes of `Guestbook.a_Name` where you should have `document.getElementsByName('a_Name')[0]`. `getElementsByName` returns an array of elements with that name; since you only have one (ie. unique names) we can assume that you want the first.
With xHTML you are supposed to use the likes of `document.getElementById` and `element.getElementsByName`. These references are good: www.w3schools.com/jsref and www.javascriptkit.com
My changes haven’t been working yet (and I’m no JS expert) so I thought I would run the default code by you for suggestions.
