Javascript Form Validation - Help

PixelChef

PixelChef

PixelChef

Soldato
Joined
8 Oct 2007
Posts
2,844
Hi,

I'm trying to do a simple form in HTML, with two Javascript functions, but I can't get it to work. All it's meant to do is have an alert message when the user types in an invalied email or phone number.

Here is the HTML:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ClientValidation</title>
</head>
<script type="text/javascript" src="ClientValidation.js">
</script>                
<body>
<form action="" method="get">
  <label>Name:
  <input type="text" name="Name" id="Name" />
  </label>
  <p>
    <label>Surname:
    <input type="text" name="Surname" id="Surname" />
    </label>
  </p>
  <p>
    <label>Email Address:
    <input type="text" name="Email Address" id="Email Address" />
    </label>
  </p>
  <p>
    <label>Phone Number:
    <input type="text" name="Phone Number" id="Phone Number" />
    </label>
  </p>
  <p>
    <label>
    <input type="submit" name="button 1" id="button 1" value="Submit" onclick="CheckNumber()" />
    </label>
  </p>
</form>
</body>
</html>

Javascript:

Code: 
<script>
function CheckEmail()
{
    var email=document.forms[0].elements[0].value;
    var countDot=0;
    var countAt=0;
   
    for (var i=0; i<email.length; i++)
    {
        var c=email.charAt(i);
       
        if (c=='@')
        {
            countAt++;
        }
        if (c=='.'
        {                
            countDot++;
        }
    }
    if (countAt>1 || countAt==0 || countDot==0
        {
            alert ("This is not a valid email address")
            return false;
        }
    else
    {
        return true;
    }
}

function CheckNumber()
{
    var PhoneNumber=document.forms[0].elements[0].value;
   
    for (var i=0; i<PhoneNumber.length; i++)
    {
          var c=PhoneNumber.charAt(i);
          if (!(c>0 || c<9))
          {
               alert("This is not a valid Phone Number");
               return false;
          }
          else
          {
               return true;
          }
    }
}
</script>

So all I've done is added the CheckNumber function to the submit button, but something is not right, it never comes up with the alert. Is the function in the right place in the HTML?

Also, I need to use the CheckEmail function aswell to check the Email, where do I put the function? Can I have them both on the submit button.

If anyone could read over it I would appreciate it. Bear in mind I am a noob at this :P

Thanks
 
I've removed the script tags from the .js file and added those missing brackets. Thanks. Unfortunatelly, it made no difference, can you notice anything else that is wrong?

If I can't get this to work I'll have a look at that guide.

Updated Javascript:

Code: 
function CheckEmail()
{
	var email=document.forms[0].elements[0].value;
	var countDot=0;
	var countAt=0;
	
	for (var i=0; i<email.length; i++)
	{
		var c=email.charAt(i);
		
		if (c=='@') 
		{
			countAt++;
		}
		if (c=='.') 
		{ 				
			countDot++;
		}
	}
	if (countAt>1 || countAt==0 || countDot==0)
		{ 
			alert ("This is not a valid email address")
			return false;
		}
	else 
	{
		return true;
	}
}

function CheckNumber()
{
	var PhoneNumber=document.forms[0].elements[0].value;
	
	for (var i=0; i<PhoneNumber.length; i++) 
	{
          var c=PhoneNumber.charAt(i);
          if (!(c>0 || c<9))
		  { 
               alert("This is not a valid Phone Number");
			   return false;
		  }
		  else
		  {
			   return true;
		  } 
	}
}
 
Spunkey, thanks for your efforts :)

I have tried to change the lines you mentioned, not sure if I'm doing it right, it shows a syntax error on both lines. Also, I've yet to use those expressions "-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]" etc, so I think I'll stick with this way first, no idea what they mean :p

I'm still not sure where to put the functions in the HTML either.. I only have the CheckNumber one in there atm.

Here's the code now:

HTML:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ClientValidation</title>
</head>
<script type="text/javascript" src="ClientValidation.js">
</script>                 
<body>
<form name="form1" method="get">
  <label>Name:
  <input type="text" name="field1" id="Name" />
  </label>
  <p>
    <label>Surname:
    <input type="text" name="field2" id="Surname" />
    </label>
  </p>
  <p>
    <label>Email Address:
    <input type="text" name="field3" id="Email Address" />
    </label>
  </p>
  <p>
    <label>Phone Number:
    <input type="text" name="field4" id="Phone Number" />
    </label>
  </p>
  <p>
    <label>
    <input type="submit" name="button 1" id="button 1" value="Submit" onclick="CheckNumber()" />
    </label>
  </p>
</form>
</body>
</html>

JS:

Code: 
function CheckEmail()
{
	var sEmail = document.[form1].[field3].value;
	var countDot=0;
	var countAt=0;
	for (var i=0; i<email.length; i++)
	{
		var c=email.charAt(i);
		if (c=='@') 
		{
			countAt++;
		}
		if (c=='.') 
		{ 				
			countDot++;
		}
	}
	if (countAt>1 || countAt==0 || countDot==0)
		{ 
			alert ("This is not a valid email address")
			return false;
		}
	else 
	{
		return true;
	}
}

function CheckNumber()
{
	var sPhoneNumber = document.[form1].[field4].value;
	for (var i=0; i<PhoneNumber.length; i++) 
	{
          var c=PhoneNumber.charAt(i);
          if (!(c>0 || c<9))
		  { 
                           alert("This is not a valid Phone Number");
			   return false;
		  }
		  else
		  {
			   return true;
		  } 
	}
}
 
Thanks again, I've removed the brackets on the form references and tried to merge the function into one. Here's what I have:

HTML:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ClientValidation</title>
</head>
<script type="text/javascript" src="ClientValidation2.js">
</script>                 
<body>
<form name="form1" method="get" action="" onsubmit="return testValid();">
  <label>Name:
  <input type="text" name="field1" id="Name" />
  </label>
  <p>
    <label>Surname:
    <input type="text" name="field2" id="Surname" />
    </label>
  </p>
  <p>
    <label>Email Address:
    <input type="text" name="field3" id="Email Address" />
    </label>
  </p>
  <p>
    <label>Phone Number:
    <input type="text" name="field4" id="Phone Number" />
    </label>
  </p>
  <p>
   <input type="submit" value="Submit" />
</form>
</body>
</html>

JS:

Code: 
function testValid()
{
	var sEmail = document.form1.field3.value;
	var countDot=0;
	var countAt=0;
	for (var i=0; i<email.length; i++)
	{
		var c=email.charAt(i);
		if (c=='@') 
		{
			countAt++;
		}
		if (c=='.') 
		{ 				
			countDot++;
		}
	}
		if (countAt>1 || countAt==0 || countDot==0)
		{ 
			alert ("This is not a valid email address")
			return false;
		}
	var sPhoneNumber = document.form1.field4.value;
	for (var i=0; i<PhoneNumber.length; i++) 
	{
          var c=PhoneNumber.charAt(i);
          if (!(c>0 || c<9))
		  { 
               alert("This is not a valid Phone Number");
			   return false;
		  }
		  else
		  {
			   return true;
		  } 
	}
}

Something still not right, must be very close though. Is the function correct? :)
 
SimonCHere said:
Unless I'm missing something sPhoneNumber and PhoneNumber and sEmail and email aren't the same!
Click to expand...

Ah, didn't notice that >.<

Ok, changed that, and i'm getting somewhere. However, there must be some error in the function, because it's not working right.

If I type nothing at all in the fields and press submit, I get the alert "This is not a valid email address"

No matter what I type in the Phone Number field, I still get the alert "This is not a valid email address"

If I type in a valid Email Address however, I get no alerts.

Any ideas?

JS:
Code: 
function testValid()
{
	var Email = document.form1.field3.value;
	var countDot=0;
	var countAt=0;
	for (var i=0; i<Email.length; i++)
	{
		var c=email.charAt(i);
		if (c=='@') 
		{
			countAt++;
		}
		if (c=='.') 
		{ 				
			countDot++;
		}
	}
		if (countAt>1 || countAt==0 || countDot==0)
		{ 
			alert ("This is not a valid email address")
			return false;
		}
	var PhoneNumber = document.form1.field4.value;
	for (var i=0; i<PhoneNumber.length; i++) 
	{
          var c=PhoneNumber.charAt(i);
          if (!(c>0 || c<9))
		  { 
               alert("This is not a valid Phone Number");
			   return false;
		  }
		  else
		  {
			   return true;
		  } 
	}
}
 
Thanks Simon :)

The email part seems to work now, great. There is just one problem left, if I put in a valid email but not a valid phone number, I don't get an alert about the phone number. Why would that be?

JS:

Code: 
function testValid()
{
	var Email = document.form1.field3.value;
	var countDot=0;
	var countAt=0;
	for (var i=0; i<Email.length; i++)
	{
		var c=Email.charAt(i);
		if (c=='@') 
		{
			countAt++;
		}
		if (c=='.') 
		{ 				
			countDot++;
		}
	}
		if (countAt>1 || countAt==0 || countDot==0)
		{ 
			alert ("This is not a valid email address")
			return false;
		}
	var PhoneNumber = document.form1.field4.value;
	var validPhone = true;
	if (PhoneNumber.length ==0)
	{ 
		alert("Phone number is required");
	     validPhone = false;
	}
	
	for (var i=0; i<PhoneNumber.length; i++) 
	{
          var c=PhoneNumber.charAt(i);
          if (!(c>0 || c<9))
		  { 
               alert("This is not a valid Phone Number");
			   validPhone = false;
			   break;
		  }
	}
	return validPhone;
}
 
Hey Simon, I tried the code you used to test, it does the same as mine.

The Email validation works. It comes up with an alert if it's invalid, nothing if it's valid.

The blank Phone number field part works. It comes up with an alert if the field is empty.

The Invalid Phone Number part does NOT work. It doesn't come up with an alert if I type a invalid phone number.

Can you test this for yourself? I can't work out why. Cheers :)
 
ok seems to be working fine now :) Thanks

One last thing, I want to make the error message for phone number appear directly under the field instead of an alert box. Can anyone explain how to do this?
 
SimonCHere said:
put a place holder (span,div,label) on the page where you want the message to appear. and instead of the alert do something like
document.getElementById("telMsg").innerHTML = "Invalid Telephone Number"
Click to expand...

Worked, thanks :) And thanks to everyone else too, I think I'm done here, for now :p
 
You must log in or register to reply here.
Back
Top Bottom