I'm using the RegExp function to validate 3 types of fields: text, radio button, dropdown menu. but the code doesn't validate. After 2 days, it's time I asked for guidence.
Criteria:
Text: only alphabet, no numerals, allowed
Radio: one must be selected,
Dropdown: an option must be selected.
Phone number: exactly 10 digits.
Email: can only come from domains: .com, .net, .gov, OR .edu (haven't yet asked 'why?' but that's what the director's asking for)
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. The VAR for GENDER and CITY 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 validations to work, I'll be good to go with the others.
Thank you in advance for your insight.
Both the JS and HTML are given below.
TokyoJ
[HTML]<HTML> <HEAD><TITLE> Form </TITLE>
<script language="javascript">
<!--
function validate (){
var fullname = document.module102form.fullname.value;
var gender = document.module102form.gender.value;
var country = document.module102form.city.value;
var email = document.module102form.email.value;
var fullnameRegExp=/\d/;
var genderRegExp=/ /;
var countryRegExp=/ /;
var emailRegExp=/^[@]||[.com]||[.net]||[.edu]||[.gov] /\g;
if (fullnameRegExp.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 CITY.");if (emailRegExp.test(email)!=true)
alert("Please valid EMAIL.");else {
alert("Thanks for completing the form.");
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>
<TD> FULL NAME: </TD></TR>
<TD><INPUT NAME="fullname" TYPE="text"> </TD>
<TR>
<TD> GENDER: </TD></TR>
<TD><INPUT TYPE="radio" NAME="gender" VALUE="Male"> MALE <INPUT TYPE="radio" NAME="gender" VALUE="Female" > FEMALE </TD>
<TR>
<TD>COUNTRY:</TD></TR>
<TD><SELECT NAME="country">
<OPTION VALUE="select"> Please select a city</option>
<OPTION VALUE="anchorage"> Anchorage </option>
<OPTION VALUE="fairbanks"> Fairbanks</option>
<OPTION VALUE="juneau"> Juneau </option>
</SELECT></TD>
<TR>
<TD> EMAIL: </TD></TR>
<TD><INPUT NAME="email" TYPE="text"> </TD>
</TABLE>
<!-- BUTTON -->
<tr>
<td> <INPUT TYPE="submit" VALUE="SEND DATA"><INPUT TYPE="reset" VALUE="CLEAR FORM"> </td></tr>
</FORM>
</BODY>
</HTML>[/HTML]