...

View Full Version : Help: Validating form field by field using RegExp



TokyoJ
12-04-2006, 04:02 AM
I run a small camp in Alaska for kids and my director is asking for a web form.
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 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: must contain .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 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> 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>
<TD><INPUT NAME="fullname" TYPE="text"> </TD>
</TR>
<TR>

<TD> GENDER: </TD>
<TD><INPUT TYPE="radio" NAME="gender" VALUE="Male"> MALE <INPUT TYPE="radio" NAME="gender" VALUE="Female" > FEMALE </TD>
</TR>
<TR>

<TD>COUNTRY:</TD>
<TD><SELECT NAME="country">
<OPTION VALUE="select"> Please select a country </option>
<OPTION VALUE="anchorage"> Anchorage </option>
<OPTION VALUE="fairbanks"> Fairbanks</option>
<OPTION VALUE="juneau"> Juneau </option>
</SELECT></TD>
</TR>
<TR>

<TD><B> EMAIL: </B></TD>
<TD><INPUT NAME="email" TYPE="text"> </TD>
</TR>
</TABLE>
<!-- BUTTON -->
<tr>

<td> <INPUT TYPE="submit" VALUE="SEND DATA"><INPUT TYPE="reset" VALUE="CLEAR FORM"> </td>
</tr>
</FORM>
</BODY>
</HTML>

Philip M
12-04-2006, 05:02 PM
You seem to be going about this the wrong way. Regular expression are intended to match complex patterns, not on/off or yes/no type data.

Best to select one of the genders and countries at the outset - then one will always be checked.

e.g. <OPTION VALUE selected="anchorage"> Anchorage </option>


<script language="javascript">
<!--
function validate (){
var fullname = document.module102form.fullname.value;
var email = document.module102form.email.value;
var flag=0;

if (/[^A-z\s]/gi.test(fullname.value)) { // fullname must contain only A-z and space
alert("Please re-enter your FULL NAME.");
document.module102form.fullname='';
document.module102form.fullname.focus();
}

if (/^([a-z0-9])(([\-.]|[_]+)?([a-z0-9]+))*(@)([a-z0-9])((([-]+)?([a-z0-9]+))?)*((.[a-z]{2,3})?(.[a-z]{2,6}))$/i.test.email.value) { //must be valid email address regardless of domain
flag ++; // flag = 1 if pass
}
if (/[\.com]| [\.net] | [\.gov] | [\.edu] /i.test(email.value)) { // email address must include one of these four domains
flag ++; // if required domain present increment flag
}
if (flag !=2) {
alert("Invalid address - please reenter your EMAIL ADDRESS");
document.module102form.email='';
document.module102form.email.focus();
}
else {

alert("Thanks for completing the form.");
document.module102.action.value="http://nova.crs.com/cgi-bin/cgiwrap/~em680a04/module102.php";
}
}
//-->
</script>

You mentioned phone number.

if (/^\d{10}$/.test(phonenumber.value)) { /// match 10 digits and nothing but

}

I have the idea that you are trying to run before you can walk, though :D

TokyoJ
12-05-2006, 01:09 AM
Thank you. That is bery helpful. It makes a bit more sense now that I look at the 2 codes side-by-side.
Looking at your example, I think I may have entered the RegExp marathon without graduating from kindergarten yet....cheers,
TokyoJ



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum