Forum Moderators: open
I get a error on page and when I stop getting that message my else if doesn't work
Any guideance about the way i have written my code and a solution to my problems will be grateful
<html>
<head>
<title>Validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function FirstNameValidator()
{
try
{
var lettersOnlyWithApostrophe = /^[a-zA-Z''-'\s]{1,40}$/g;
var validateFirstName = document.getElementById("inputFirstName");
if (validateFirstName.length == 0 ¦¦ validateFirstName.value == "" )
{
alert("You must add your first name.");
}
else if (validateFirstName.match(lettersOnlyWithApostrophe) == null)
{
alert("Test");
alert(validateFirstName.match(lettersOnlyWithApostrophe) == null);
}
else
{
alert(lettersOnly.test(validateFirstName) == null);
}
}
catch(err)
{
alert("There are Error\'s on the Page");
}
}
//-->
</script>
</head>
<body>
<form name="form1" method="post" action="">
<table width="200" border="1" align="center">
<tr><td><input type="text" name="inputFirstName"></td></tr>
<tr><td><input type="submit" name="Submit" value="View Message" onClick="FirstNameValidator()" /></td></tr>
</table>
</form>
</body>
</html>
First I would leave the try/catch out and let the browser report the error location
if (validateFirstName.length == 0 ¦¦ validateFirstName.value == "" )
var validateFirstName = document.getElementById("inputFirstName")
You want the value of the element not the element itself
var validateFirstName = document.getElementById("inputFirstName").value;
if (validateFirstName.length == 0)
{
alert("You must add your first name.");
}
else if (validateFirstName.match(lettersOnlyWithApostrophe) == false)
{
alert("Test");
}
}
I am no expert on regular expressions but the one in your first post looks best.
Add a few more alerts say
alert( validateFirstName );
alert( validateFirstName.match(lettersOnlyWithApostrophe) );
alert( validateFirstName.match(lettersOnlyWithApostrophe)[0] );
null is the correct test here
else if (validateFirstName.match(lettersOnlyWithApostrophe) === null )
just noticed
<input type="text" name="inputFirstName">
should be
<input type="text" name="inputFirstName" id="inputFirstName">
p.s. make sure you have script error notification turned on, in IE tools -> internet options -> advanced
The alert states that the empty textbox has a value of null which is correct for the else if
alert(validateFirstName); = null
when you add just a-z characters then it goes to the else
if you add 123 to the textbox it goes to the elseif which is correct
<html>
<head>
<title>Validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function FirstNameValidator()
{
try
{
var lettersOnlyWithApostrophe = ("^[a-zA-Z''-'\s]{1,40}$");
var validateFirstName = document.getElementById("inputFirstName").value;
if (validateFirstName.value == "")
{
alert("You must add your first name.");
}
else if (validateFirstName.match(lettersOnlyWithApostrophe) == null)
{
alert("This is not a Valid First Name");
alert(validateFirstName.match(lettersOnlyWithApostrophe));
}
else
{
alert("This is Correct");
alert(validateFirstName);
}
}
catch(err)
{
alert("There are Error\'s on the Page");
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<table width="200" border="1" align="center">
<tr><td><input type="text" name="txtInputFirstName" id="inputFirstName"></td></tr>
<tr><td><input type="submit" name="Submit" value="View Message" onClick="FirstNameValidator()" /></td></tr>
</table>
</form>
</body>
</html>
I prefer using the exact equality test === instead of ==, == includes some odd conversion rules
You may find this thread of interest [webmasterworld.com...]
