js form validation

[carolina]

Hi,

I am trying to validate a form with text boxes, drop downs, radio buttons and check boxes using javascript.

The form is a form to email script using php.

I have managed to figure out the start of the javascript validating but it doesn't work. The confirmation of email1 and email2 is the only thing that works at the moment.

Below is the script - I have text box and drop down validation and also a function validating email1 and email2 (confirming that they are both identical)

If anyone can understand what's going wrong, any help would be much appreciated.

Javascript:

<!-- validate Form (open function)//-->
function validate()
{
for(i=0; i<document.form1.elements.length;i++)
{
document.form1.elements[i].style.backgroundColor="#FFFFFF";
}

<!-- validate firtname (Text Box) required //-->
if(document.form1.strName.value.length==0)
{
alert("Enter a Name");
document.form1.firstname.focus();
document.form1.firstname.select();
return false;
}
<!-- validate lastname (Text Box) required //-->
if(document.form1.strName.value.length==0)
{
alert("Enter a Name");
document.form1.lastname.focus();
document.form1.lastname.select();
return false;
}
<!-- validate Postcode (Text Box) number required//-->
if(document.form1.postcode.value.length==0)
{
alert("What is your contact number?");
document.form1.postcode.focus();
document.form1.postcode.select();
return false;
}
if(isNaN(document.form1.postcode.value))
{
alert("Number must be a number");
document.form1.postcode.focus();
document.form1.postcode.select();
return false;
}
<!-- validate Email (Text Box) characters: @ . required //-->
var intAtSymbol = document.form1.email.value.indexOf("@");
var intDotSymbol = document.form1.email.value.indexOf(".");
var intLength = document.form1.email.value.length;

if(intAtSymbol == 0 || intAtSymbol > intLength-5)
{
alert("Email must contain valid @ eg: name@email.com")
document.form1.email.focus();
document.form1.email.select();
return false;
}
if(intDotSymbol < (intAtSymbol+2)|| intDotSymbol > (intLength-3))
{
alert("Email must contain valid . eg: name@email.com")
document.form1.email.focus();
document.form1.email.select();
return false;
}
<!-- validate Phone (Text Box) required number//-->
if(document.form1.phone.value.length==0)
{
alert("What is your phone number?");
document.form1.phone.focus();
document.form1.phone.select();
return false;
}
if(isNaN(document.form1.phone.value))
{
alert("Phone Number must be a number");
document.form1.phone.focus();
document.form1.phone.select();
return false;
}
<!-- validate title (Drop Down) required //-->
if ( document.form1.title.selectedIndex == 0 )
{
alert ( "Please Select a Title." );
return false;
}
<!-- validate age (Drop Down) required //-->
if ( document.form1.age.selectedIndex == 0 )
{
alert ( "Please Select an Age." );
return false;
}
<!-- validate occupation (Drop Down) required //-->
if ( document.form1.occupation.selectedIndex == 0 )
{
alert ( "Please Select an Occupation." );
return false;
}
<!-- validate children (Drop Down) required //-->
if ( document.form1.children.selectedIndex == 0 )
{
alert ( "Please Select number of Children." );
return false;
}
<!-- validate relationship (Drop Down) required //-->
if ( document.form1.relationship.selectedIndex == 0 )
{
alert ( "Please Select Type of Relationship." );
return false;
}
}
function check(a,b) {
var obja = document.getElementById(a)
var objb = document.getElementById(b)

if (obja.value==objb.value) {
} else {
alert("Email address does not match, please re-type")
}
}
//-->
First line from Form Code:
<form action="joinonline_test02.php" method="post" name="form1" onSubmit="check('email', 'email2'); return false">

[themarty]

onSubmit="check('email', 'email2'); return false"
this is what happens when you submit the form. it executes the function check and the only thing that function does is checking whether email equals email2

instead of calling check() i would call the function validate() and let that function also do the check

anyways, since you're using php as well, i would put the validation part there and not in javascript (or at least both), because javascript can be disabled.

[Kravvitz]

1) Yes, always validate with a server-side language, even if you use JavaScript for form validation as well.

2) I would also like to point out that when you always return false from the onsubmit handler, the form will never submit unless there is an error in the function or JavaScript support is disabled.

3) Instead of formatting your comments like
<!-- validate children (Drop Down) required //-->
do it like
// validate children (Drop Down) required
OR
/* validate children (Drop Down) required */

[carolina]

thanks heaps for your responses.

server side validation was the next thing i was going to tackle after i got this working :)

themarty: i've replaced

onSubmit="check('email', 'email2'); return false"

with

onSubmit="validate()"

silly question, but what is suppose to now go inside the brackets? I still need to include the 'email', 'email2' somewhere right?

Kravvitz: I have changes those comments, thank you for that.

So are you saying that now that I have deleted 'return false' from the onSubmit handler - that the form will submit now?

Could either of you please point in the right direction for php validation - a website or tutorial.

thanks again.

[Kravvitz]

Try this.
if ( document.form1.relationship.selectedIndex == 0 ) {
alert ( "Please Select Type of Relationship." );
return false;
}

if (document.form1.email.value!=document.form1.email2.value) {
alert("Email address does not match, please re-type");
return false;
}
return true;
}

PHP form validation tutorials (http://www.google.com/search?q=php+form+%7Etutorial+%7Evalidate)

So are you saying that now that I have deleted 'return false' from the onSubmit handler - that the form will submit now?
Yes. However, what you've changed it to won't stop it from submitting if a field isn't filled out correctly.

Try this.
onsubmit="return validate()"

[carolina]

Thanks heaps for all your help - the form works perfectly.
Now for some php :)