Could someone please have a look and offer some advice on where I'm making mistake(s)?
I'm using the
RegExp function to validate 3 types of fields: text, radio button, dropdown menu but I can't get it to validate. After 2 days, it's time to ask for guidence.
Criteria:
Text: only alphabet, no numerals, allowed
Radio: one must be selected,
Dropdown: an option must be selected.
Goal:
1. I don't want all the errors to come up inside one alert, but rather have one alert show at a time. After one entry error is corrected, the next error will appear after clicking submit again. For example, if the form is sent blank, ONLY the Alert, "Please enter your name." appears because it is the first field.
2. Once the form is completed correctly, an alert saying, "Thank you for completing the form." pops up in front of the new page which the SUBMIT button leads to.
I'm an advanced/beginner catching up on JS while helping a friend's YMCA center. The VAR for GENDER and COUNTRY have been left empty on purpose, simply because I don't know how to enter the correct info.
There are other text fields and radio buttons in the full version of form so if I can get these 3 types validations to work, I'll be good to go with the rest of the form.
Thank you in advance for your insight.
Both the JS and HTML are given below.
Cheers to you.
TokyoJ
<HTML> <HEAD><TITLE> YMCA CAMP LIST </TITLE>
<script language="javascript">
<!--
function validate (){
var fullname = document.module102form.fullname.value;
var gender = document.module102form.gender.value;
var country = document.module102form.country.value;
var fullnameRegExp=/\d/; // \d checks for presence of digits
var genderRegExp=/ /; // needs to validate radio button
var countryRegExp=/ /; // needs to validate drop down menu selection
if (genderRegExp.test(fullname)!=true)
alert("Please reenter your FULL NAME.");
if (genderRegExp.test(gender)= unchecked)
alert("Please select a GENDER.");
if (countryRegExp.test(country)!=true)
alert("Please select a country.");
else {
alert("Thanks for completing the form correctly.");
document.module102.action.value="http://nova.crs.com/cgi-bin/cgiwrap/~em680a04/module102.php";
}
}
//-->
</script>
</HEAD>
<BODY>
<FORM METHOD="post" name="module102form" onSubmit="return validate(this);" ACTION="http://nova.crs.com/cgi-bin/cgiwrap/~em680a04/module102.php">
<!-- START HTML -->
<TABLE>
<TR>
<TH ALIGN="Left" COLSPAN="2"><H1> <U>LET'S GET STARTED</U></H1></TH>
</TR>
<TR>
<TD><B> FULL NAME: </B></TD>
<TD width="608"><INPUT NAME="fullname" TYPE="text"> (letters only) </TD>
</TR>
<TR>
<TD><B> GENDER: </B> </TD>
<TD><B><INPUT TYPE="radio" NAME="gender" VALUE="Male"> MALE </B>
<B><INPUT TYPE="radio" NAME="gender" VALUE="Female" > FEMALE </B></TD>
</TR>
<TR>
<TD><B> COUNTRY: </B></TD>
<TD><SELECT NAME="country">
<OPTION VALUE="<B><H2> =>SELECT A COUNTRY<= </H2></B>" SELECTED> Please select a country </option>
<OPTION VALUE="United States"> United States </option>
<OPTION VALUE="Canada"> Canada </option>
<OPTION VALUE="Japan"> Japan </option>
</SELECT></TD>
</TR>
</TABLE>
<!-- BUTTON -->
<tr>
<td> <INPUT TYPE="submit" VALUE="SEND DATA"><INPUT TYPE="reset" VALUE="CLEAR FORM"> </td>
</tr>
</FORM>
</BODY>
</HTML>
