a function to validate email in a form does not work

[lindaonline15]

hello all.
here I'm trying to use a javascript function to validate my html form. everything works exepct for the email validation part. can you help me solve this problem please?

this is the validation function:

<script language="javascript" type="text/javascript">

function formValidator(fr)
{
var check = "";
if (fr.elements['FullName'].value.length<1)
{
check += "Please enter user's full name\n\n";
}
if(fr.elements['email'].value.length<1)
{
check += "Please enter user's email address\n\n";
}
if(fr.elements['username'].value.length<1)
{
check += "Please enter user's username\n\n";
}
if(fr.elements['username'].value.length>12)
{
check += "Username can have maximum 12 characters\n\n";
}
if(fr.elements['password'].value.length<6)
{
check += "Please enter user's password with at least 6 characters\n\n";
}
if(fr.elements['AccessLevel'].value.length<1)
{
check += "Please select user's level of access\n\n";
}

if (! allValidChars(email)) { // check to make sure all characters are valid
check += "Please enter a valid email address\n\n";
}
if (email.indexOf("@") < 1) { // must contain @, and it must not be the first character
check += "Please enter a valid email address\n\n";
} else if (email.lastIndexOf(".") <= email.indexOf("@")) { // last dot must be after the @
check += "Please enter a valid email address\n\n";
} else if (email.indexOf("@") == email.length) { // @ must not be the last character
check += "Please enter a valid email address\n\n";
} else if (email.indexOf("..") >=0) { // two periods in a row is not valid
check += "Please enter a valid email address\n\n";
} else if (email.indexOf(".") == email.length) { // . must not be the last character
check += "Please enter a valid email address\n\n";
}

if (check != "")
{
alert(check);
return false;
}

}

function allValidChars(email) {
var parsed = true;
var validchars = "abcdefghijklmnopqrstuvwxyz0123456789@.-_";
for (var i=0; i < email.length; i++) {
var letter = email.charAt(i).toLowerCase();
if (validchars.indexOf(letter) != -1)
continue;
check += "Please enter a valid email address\n\n";
break;
}
return check;
}

</script>

[daveVk]

the variable email is not declared

try

var email = fr.elements['email'].value;
if (! allValidChars(email)) { // check to make sure all characters are valid

[lindaonline15]

still not working..:(

[vincevincevince]

I'm afraid your code is full of bugs! For a start, you can't use <form>.elements[fieldname] to access a field's value.

This bit of code will parse the form fields into an associative array, much as you seem to have been expecting:

var elements = Array();
for (node in fr.childNodes)
{
if ((fr.childNodes[node].name!=undefined)&&(fr.childNodes[node].name.length>0)) 
{
elements[fr.childNodes[node].name]=fr.childNodes[node].value;
}
}

From there on, you can use elements['fieldname'] to access the values, e.g.:

if(elements['email'].length<1)
{
check += "Please enter user's email address\n\n";
}
 
var email = elements['email'];
 
if (! allValidChars(email)) {

[lindaonline15]

should my code look like this now?
if u mean I have to apply it to all fields, actually before i add the email validation part, all other fields where working just nicely...

function formValidator(fr)
{
var check = "";
if (fr.elements['FullName'].value.length<1)
{
check += "Please enter user's full name\n\n";
}
if(fr.elements['email'].value.length<1)
{
check += "Please enter user's email address\n\n";
}
if(fr.elements['username'].value.length<1)
{
check += "Please enter user's username\n\n";
}
if(fr.elements['username'].value.length>12)
{
check += "Username can have maximum 12 characters\n\n";
}
if(fr.elements['password'].value.length<6)
{
check += "Please enter user's password with at least 6 characters\n\n";
}
if(fr.elements['AccessLevel'].value.length<1)
{
check += "Please select user's level of access\n\n";
}

var elements = Array();
for (node in fr.childNodes)
{
if ((fr.childNodes[node].name!=undefined)&&(fr.childNodes[node].name.length>0))
{
elements[fr.childNodes[node].name]=fr.childNodes[node].value;
}
}

if(elements['email'].length<1)
{
check += "Please enter user's email address\n\n";
}

var email = elements['email'];

if (! allValidChars(email)) { // check to make sure all characters are valid
check += "Please enter a valid email address\n\n";
}
if (email.indexOf("@") < 1) { // must contain @, and it must not be the first character
check += "Please enter a valid email address\n\n";
} else if (email.lastIndexOf(".") <= email.indexOf("@")) { // last dot must be after the @
check += "Please enter a valid email address\n\n";
} else if (email.indexOf("@") == email.length) { // @ must not be the last character
check += "Please enter a valid email address\n\n";
} else if (email.indexOf("..") >=0) { // two periods in a row is not valid
check += "Please enter a valid email address\n\n";
} else if (email.indexOf(".") == email.length) { // . must not be the last character
check += "Please enter a valid email address\n\n";
}

if (check != "")
{
alert(check);
return false;
}

}

function allValidChars(email) {
var parsed = true;
var validchars = "abcdefghijklmnopqrstuvwxyz0123456789@.-_";
for (var i=0; i < email.length; i++) {
var letter = email.charAt(i).toLowerCase();
if (validchars.indexOf(letter) != -1)
continue;
check += "Please enter a valid email address\n\n";
break;
}
return check;
}

</script>

[daveVk]

function allValidChars returns a text message, yet you call assumes it returns true or false

if (! allValidChars(email)) { // check to make sure all characters are valid
check += "Please enter a valid email address\n\n";
}

change this to

check += allValidChars(email);

and add changes below

function allValidChars(email) {
var parsed = true; \\ this line not required
var check = "";
var validchars = "abcdefghijklmnopqrstuvwxyz0123456789@.-_";
for (var i=0; i < email.length; i++) {
var letter = email.charAt(i).toLowerCase();
if (validchars.indexOf(letter) != -1)
continue;
check += "Please enter a valid email address\n\n";
break;
}
return check;
}

[lindaonline15]

still not working.. this is my code now...:

<script language="javascript" type="text/javascript">

function formValidator(fr)
{
var check = "";
if (fr.elements['FullName'].value.length<1)
{
check += "Please enter user's full name\n\n";
}
if(fr.elements['email'].value.length<1)
{
check += "Please enter user's email address\n\n";
}
if(fr.elements['username'].value.length<1)
{
check += "Please enter user's username\n\n";
}
if(fr.elements['username'].value.length>12)
{
check += "Username can have maximum 12 characters\n\n";
}
if(fr.elements['password'].value.length<6)
{
check += "Please enter user's password with at least 6 characters\n\n";
}
if(fr.elements['AccessLevel'].value.length<1)
{
check += "Please select user's level of access\n\n";
}

var elements = Array();
for (node in fr.childNodes)
{
if ((fr.childNodes[node].name!=undefined)&&(fr.childNodes[node].name.length>0))
{
elements[fr.childNodes[node].name]=fr.childNodes[node].value;
}
}

if(elements['email'].length<1)
{
check += "Please enter user's email address\n\n";
}

var email = elements['email'];

/*if (! allValidChars(email)) { // check to make sure all characters are valid
check += "Please enter a valid email address\n\n";
}*/

check += allValidChars(email);

if (email.indexOf("@") < 1) { // must contain @, and it must not be the first character
check += "Please enter a valid email address\n\n";
} else if (email.lastIndexOf(".") <= email.indexOf("@")) { // last dot must be after the @
check += "Please enter a valid email address\n\n";
} else if (email.indexOf("@") == email.length) { // @ must not be the last character
check += "Please enter a valid email address\n\n";
} else if (email.indexOf("..") >=0) { // two periods in a row is not valid
check += "Please enter a valid email address\n\n";
} else if (email.indexOf(".") == email.length) { // . must not be the last character
check += "Please enter a valid email address\n\n";
}

if (check != "")
{
alert(check);
return false;
}

}

function allValidChars(email) {
var check = "";
var validchars = "abcdefghijklmnopqrstuvwxyz0123456789@.-_";
for (var i=0; i < email.length; i++) {
var letter = email.charAt(i).toLowerCase();
if (validchars.indexOf(letter) != -1)
continue;
check += "Please enter a valid email address\n\n";
break;
}
return check;
}

</script>

[daveVk]

What do you enter and what happens, good emails rejected, other way around, javascript error ? If getting "Please enter a valid email address" please add number to each case to determine failing case.

eg

check += "1-Please enter a valid email address\n\n";

[lindaonline15]

when I enter a false email address for example: aaaaaaaa, nothing happens and the validation error alert does not appear...

[daveVk]

Make sure script error reporting is turned on.

In IE got to tools -> internet options -> advanced -> display a notification about every script error.

I assume "nothing happens" means the form is not sent, the script if likely to be faulting somewhere.

[lindaonline15]

it gives this error:
problems with this webpage might prevent it from being display properly or function properly. in the future you can display this message by double clicking the warning icon displayed in the status bar.

[daveVk]

[deerbrook.com...]

follow these instruction EXCEPT disable script debugger should NOT be ticked, display a notification about every script error should be ticked

You should then get more detailed error message.

[vincevincevince]

I suggest you test with Firefox or Opera - the error message feedback is in another league. Firefox with Firebug is a great way to squash bugs in javascript.