Help with Form Validation

javanewbie7

09-30-2011, 09:53 PM

Hello,

I'm still learning javascript and have recently started to try to gain a better grasp on it. I'm trying to validate a form to ensure all fields are marked.

Everything works except it's not validating the Education Level and Gender.

I've looked at other forms in an attempt to correct this, but the changes I've made haven't worked. Any ideas? If you'd rather me upload it to a website, let me know. Thanks

function checkTextBox()
{ if (document.forms[0].name.value == "")
{
window.alert("You must enter your name.");
document.forms[0].name.focus();
return false;
}
else return true;
}

function checkRadio()
{ var genderSelected = false;
for (var i = 0; i < 2; ++i) {
if (document.forms[0].Gender[i].checked == true) {
genderSelected = true;
break;
}
}

if (genderSelected != true) {
window.alert("You must select your gender.");
return false;
}else
return true;
}

function checkCheck()
{
var referralSelected = false;
for (var i = 0; i < 3; i++)
{
if (document.forms[0].referral[i].checked == true)
{
referralSelected = true;
break;
}
}
if (referralSelected == false)
{
window.alert("You must select how you were referred");
}
return referralSelected;
}

function validateForm() {

if (checkTextBox() && checkRadio() && checkCheck())
return true;
else
return false;

}

function confirmReset() {
var resetForm = window.confirm("Are you sure you want to reset the form?");
if (resetForm == true)
return true;
return false;
}

</script>

</head>

<body>

<h2><b>Form Validation Example</b></h2>
<form action="EasyFormProcessor.html" method="get" enctype="application/x-www-form-urlencoded"; onsubmit = "return validateForm();" onreset="return confirmReset();">

<p><b>Enter your name: </b>
<input type="text" name="name" size="50" /></p>
<p><strong>Gender:</strong>:
<input type="radio" name="gender" onclick="" value="Male" />
Male
<input type="radio" name="gender" onclick="" value="Female" />Female</p>
<p>
<b>Education Level:</b>
<input type="checkbox" name="Education" value="Drop Out" />High School Drop Out
<input type="checkbox" name="Education" value="High School Diploma or GED" />High School Diploma/GED
<input type="checkbox" name="Education" value="College" />College</p>
<p>
<b>How did you hear about us?

<select name="Referral">
<option value="TV Ads">TV Ads</option>
<option value="Newspaper Ad">Newspaper Ad</option>
<option value="Search Engine">Search Engine</option>
<option value="Friend">Friend</option>
<option value="other">Other</option>
</select>
</b>
<p>
<input type="submit" value="Submit" /><b> </b><input type="reset" /><b><p>

rangana

10-01-2011, 02:05 AM

Please find these edits to checkRadio() and checkCheck() function should keep you moving:

function checkRadio() {
var genderSelected = false,
fName = 'gender'; // name of our gender radio buttons

// loop through all the elements that matches the name we set
for ( var i = 0, els=document.getElementsByName(fName) ; i < els.length ; i++)
genderSelected = (els[i].checked) ? true : genderSelected; // sets true/false if gender is set/not

if (!genderSelected)// if no gender was set...
alert('You must select your gender.');

return genderSelected; // returns true/false
}

function checkCheck()
{
var referralSelected = false,
refName = 'Education';

// loop through all the elements that matches the name we set
for ( var i = 0, els=document.getElementsByName(refName) ; i < els.length ; i++)
referralSelected = (els[i].checked) ? true : referralSelected; // sets true/false if referral is checked/not

if (!referralSelected)// if no referral was checked...
alert('You must select how you were referred');

return referralSelected;
}

As a tip, you might want to look into:

document.getElementsByName - https://developer.mozilla.org/en/DOM/document.getElementsByName
documents.forms[].elements[] - http://www.quirksmode.org/js/dom0.html

Hope that helps.

Philip M

10-01-2011, 07:28 AM

Form validation of the pattern if (document.forms[0].name.value == "")
is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. Numeric values, such as zip codes and phone numbers, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.