...

View Full Version : Help with Javascript form validator



kellyw
01-02-2007, 09:54 PM
Hello.

I have created a simple php form on <a href="http://iguanacreek.com/contactform.htm">this</a> page and have added a javascript validator to check for a name and email address. The validator works and the php page is correctly called up, however the email comes back with blank fields. I have double checked all field names and all are correctly referenced.

The problem lies somewhere in the validator javascript code.


function isMailAddress(m) {
if ((m == '') || (m == ' ')) { return false; }

var a = 1;
var ml = m.length;

while ((ml>a) && (m.charAt(a) != "@")) { a++ }
if ((a >= ml) || (m.charAt(a) != "@")) {
return false;
} else {
a = a + 2;
}
while ((ml > a) && (m.charAt(a) != ".")) { a++ }
if ((a >= ml - 1) || (m.charAt(a) != ".")) {
return false;
} else {
return true;
}
}

// For Contact Form
function validate(obj) {
var valid = true;
var msg = "";

if (obj.elements["name"].value == "") {
msg += "Please enter your name.\n";
valid = false;
obj.elements["name"].focus();
}

if (!isMailAddress(obj.elements["email"].value)) {
msg += "Please enter a valid email address.\n";
if (valid) {
valid = false;
obj.elements["email"].focus();
}
}

if (!valid) alert(msg);

return valid;
}



The Firefox javascript console gives me the following error:


[Exception... "'Permission denied to set property XULElement.selectedIndex' when calling method: [nsIAutoCompletePopup::selectedIndex]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame :: http://iguanacreek.com/validator.js :: validate :: line 40" data: no]
[Break on this error] if (!valid) alert(msg);

Does anyone know what this means? I've used the same base php form code and js validator code on many other web sites without any problems.

Thanks in advance.

Kelly W

A1ien51
01-02-2007, 10:06 PM
That error is an error with the autocomplete built into the browser. If you search Google you will find more info.


I think you should find a regular expression for an email address and avoid loops.

how about testing stuff like

a.a.a.a..a.a.a.a.a.a.a.a.a.......a@a@a@a@a@a@a.a.com.com.foobar

Eric

Ancora
01-02-2007, 10:54 PM
Kelly:

Use onsubmit when validating a form:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function validate(nForm){

var nEmail = nForm['email'];
if (!/^\w+\-{0,1}\w+[\w|\.]{0,1}\w+\@\w+[\w|\-]{1,1}\w+\.{1,1}\w+[\w|\-]{1,1}\w+\.{0,1}\w*$/.test(nEmail.value))
{
alert('Invalid Email');
nEmail.value = "";
nEmail.focus();
return false;
}
if (nForm['comments'].value == "")
{
alert('Please write a comment');
return false;
}
if (nForm['recipient'].selectedIndex == 0)
{
alert('Select a Recipient');
return false;
}
alert('Thank you for your submission');
return true;
}

</script>
<style type="text/css">

body {background-color:#eae3c6;margin-top:60px}
form {width:350px;margin:auto}
fieldset {background-color:#f0fff0;border:1px solid #87ceeb}
legend {font-family:georgia;font-size:14pt;color:#00008b;background-color:#87ceeb;padding-left:3px;padding-right:3px;margin-bottom:5px}
label {font-family:times;font-size:12pt;color:#00008b;padding:5px;display:block}
select {font-family:times;font-size:12pt;margin-left:40px}
.submitBtn {font-family:tahoma;font-size:10pt;display:block;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px}
.comments {font-family:times:font-size:12pt;margin-left:42px;overflow:auto}
.emailAddr {font-family:times;font-size:12pt}

</style>
</head>
<body>
<form method="post" action="" onsubmit="return validate(this)">
<fieldset>
<legend>Send a Comment</legend>
<label>Email: <input type='text' name='email' size='37' class='emailAddr' value='my_name-is.here@big_company-123.net' ></label>
<label>Comments:</label>
<textarea rows='4' cols='31' name='comments' class='comments'></textarea>
<label>Recipient:
<select name='recipient'>
<option> Make a Selection</option>
<option> M. Jones </option>
<option> K. Smith </option>
<option> J. Doe </option>
</select>
</label>

<input type='submit' name='submit' value="Submit" class='submitBtn'>
</fieldset>
</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum