JavaScript Form Validation Chooses Issues [Archive]

lockdown

01-23-2012, 06:21 PM

<!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>Untitled Document</title>
<script type='text/javascript'>

function myForm(){
// Make quick references to our fields
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
var address = document.getElementById('address');
var city = document.getElementById('city');
var state = document.getElementById('state');
var zcode = document.getElementById('zcode');
var email = document.getElementById('email');

// Check each input in the order that it appears in the form!
if(isAlphabet(fname, "Please enter only letters for your first name")){
if(isAlphabet(lname, "Please enter only letters for your last name")){
if(isAlphanumeric(address, "Numbers and Letters Only for Address")){
if(isAlphabet(city, "Please enter only letters for your city name")){
if(madeSelection(state, "Please Choose a State")){
if(isNumeric(zcode, "Please enter a valid zip code")){
if(emailValidator(email, "Please enter a valid email address")){
return true;
}
}
}
}
}
}
}

return false;
}

function formChoice(elem, helperMsg){
if(elem.fname, elem.lname, elem.address, elem.city, elem.state, elem.zcode == 0 || elem.email == 0){
return true;
}else{
alert(helperMsg);
elem.focus();
return flase;
}
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z\s]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function madeSelection(elem, helperMsg){
if(elem.value == "Please Choose"){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}

function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>
</head>

<body>
<p>My Form.</p>
<form action="conformation.html" target="_self" onsubmit="return myForm()">
<fieldset>
<legend>Name</legend>
First Name:
<input type="text" id="fname" value="" />
<br />
Last Name:
<input type="text" id="lname" value="" />
<br />
</fieldset>
<br />
<fieldset>
<legend>Address</legend>
Address:
<input type="text" id="address" value="" />
<br />
City:
<input type="text" id="city" value="" />
<br />
State:
<select id="state">
<option>Please Choose</option>
<option>AL</option>
<option>AK</option>
<option>AZ</option>
<option>AR</option>
<option>CA</option>
<option>CO</option>
<option>CT</option>
<option>DE</option>
<option>FL</option>
<option>GA</option>
<option>HI</option>
<option>ID</option>
<option>IL</option>
<option>IN</option>
<option>IA</option>
<option>KS</option>
<option>KY</option>
<option>LA</option>
<option>ME</option>
<option>MD</option>
<option>MA</option>
<option>MI</option>
<option>MN</option>
<option>MS</option>
<option>MO</option>
<option>MT</option>
<option>NE</option>
<option>NV</option>
<option>NH</option>
<option>NJ</option>
<option>NM</option>
<option>NY</option>
<option>NC</option>
<option>ND</option>
<option>OH</option>
<option>OK</option>
<option>OR</option>
<option>PA</option>
<option>RI</option>
<option>SC</option>
<option>SD</option>
<option>TN</option>
<option>TX</option>
<option>UT</option>
<option>VT</option>
<option>VA</option>
<option>WA</option>
<option>WV</option>
<option>WI</option>
<option>WY</option>
</select>
<br />
Zip Code:
<input type="text" id="zcode" value="" />
<br />
</fieldset>
<br />
<br />
<fieldset>
<legend>E-mail Address</legend>
E-mail Address:
<input type="text" id="email" value="" />
<br />
</fieldset>
<input type="submit" value="Submit" />
</form>
</body>
</html>

Hello Everyone - I am trying to make a form that requires a user to either enter in their mailing address and or e-mail or both. For example, if somebody only enters in their e-mail address the form would validate correctly and send the validation information to a conformation page. Or, the other s scenario would be they entered their mailing address information but left the e-mail field blank, the form would validate and confirm the form information on a conformation page. Or the last scenario would be that all fields were filled out, which then wouldn't be an issue(my form does this now).

What I have done was made a custom function, which is in the code above on line, 39 and then have it called on an onsubmit button but that wasn't working.
Code here:

function formChoice(elem, helperMsg){
if(elem.fname, elem.lname, elem.address, elem.city, elem.state, elem.zcode == 0 || elem.email == 0){
return true;
}else{
alert(helperMsg);
elem.focus();
return flase;
}
}

The other thing I tried to do was making the if on line 25 an else if else and or just an else. I understand with an else if the condition are not met than the if statement moves on to the else and if that isn't met then both statements are false and the form will not submit, but both else if else, and else doesn't work at line 25. I tried moving the line 25 e-mail line down past the brackets and that didn't work.

I have read many books and have visited many sites to try on my own to learn how to do this, and I think I am not understanding some basic concepts, and I would be tickled if somebody could look at my code and look at my problem and see what knowledge I am missing and how to fix my problem.

Thanks.