Using regexp to validate simple form

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: 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">

<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 city</option>
<OPTION VALUE="anchorage"> Anchorage </option>
<OPTION VALUE="fairbanks"> Fairbanks</option>
<OPTION VALUE="juneau"> Juneau </option>
</SELECT></TD>

</TR>
<TR>

<TD> EMAIL: </TD>
<TD><INPUT NAME="email" TYPE="text"> </TD>

</TR>
</TABLE>

<tr>

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

</tr>
</FORM>
</BODY>
</HTML>[/HTML]

Dec 4 '06 #1

Subscribe Post Reply

8097

Hagelbrakare

Hi! I made a few changes in you javascript code. I'm not sure what you wanted to check when it comes to fullname, but you checked if it did not contain a digit which I'm quite sure you didn't meen to :) Now it checks if it is a full name ( ex "chandler bing" or "chandler bing bong") not just "chandler".

Gender will actually return an array because there are two elements with same name. You have to check if either of them are checked.

contry.value will return "select" when no city is selected. I suppose that it should be city all the way.

validating an e-mail is hard, but this little regex just checks the end.

Expand|Select|Wrap|Line Numbers

 function validate () {

    var fullname = document.module102form.fullname.value;

    var country = document.module102form.country.value;

    var email = document.module102form.email.value;
 
    var fullnameRegExp=/^\D+( \D+)+$/;

    var emailRegExp=/[.](com|net|edu|gov)$/;
 
    if (!fullnameRegExp.test(fullname)) {

        alert("Please reenter your FULL NAME.");

        return false;

    }
 
    if (!document.module102form.gender[0].checked && !document.module102form.gender[1].checked) {

        alert("Please select a GENDER.");

        return false;

    }
 
    if (country == "select") {

        alert("Please select a CITY.");

        return false;

    }
 
    if (!emailRegExp.test(email)) {

        alert("Please valid EMAIL."); 

        return false;

    }
 
    alert("Thanks for completing the form.");

    return true;

}

Dec 4 '06 #2

TokyoJ

Hagelbrakare,
Thank you. I'm dusting off my brain so the changes you made are clear.

So is this the correct onSubmit?

onSubmit="return validate(this);"

I'm not clear on the differences between

onSubmit="return validate(this);"

and

onSubmit="return validate_form();"

and

onSubmit="return validate();"

Could you explain which is best for this form(in simple terms)?
Cheers,
John

Dec 4 '06 #3

Hagelbrakare

I'm sorry, I forgot to tell you.

As you can see the function is declared as "function validate()" which meens that functions name is validate and that it takes no arguments (the parentesis is empty). This meens that you should call it by validate(). validate() will return true or false. onsubmit should return what validate returns. I know that is sounds a little bit too much already, but onsubmit="return validate()" will to the job.

You are welcome to ask as many questions as you want :) Is there anything in the javascript function that puzzles you?

Dec 4 '06 #4

TokyoJ

That clears it up and makes sense. Used onSubmit return validate (); and worked well.
One point I'm still vague on is this... for validations, when using

Expand|Select|Wrap|Line Numbers

 var fullname = document.feedback.fullname.value;// TEXT BOX

var city = document.feedback.city.value;          // DROPDOWN 

var gender = document.feedback.gender.value;      // DROPDOWN

var area = document.feedback.area.value;     // TEXT BOX
 
var fullnameRegExp=/^\D+( \D+)+$/;

var emailRegExp=/[.](com|net|edu|gov)$/;

var areaRegExp=/^[a-zA-z]+$ /;

var cityRegExp=/ /;

var phoneRegExp=/ /;

var cellRegExp=/ /;

var emailRegExp=/ /;.

Dec 4 '06 #5

TokyoJ

(my 5 min of allowed 'edit' time expired so am posting a new reply)
Thank you. That makes sense and it works.
There is one point that I'm getting hung up on...using VAR in RegExp validations. For example here I use 4 fields, fullname, gender, city, and interests; each with a different input style.

var fullname = document.feedback.fullname.value; // TEXT BOX
var city= document.feedback.city.value; // DROPDOWN MENU
var interest = document.feedback.interest.value; // CHECKBOX
var gender = document.feedback.gender.value; // RADIO BUTTON

then in the next step, xxxRegExp is used for only TEXTBOX var's, such as
var fullnameRegExp=/^\D+( \D+)+$/;
correct?

If so then this leaves RADIO BUTTONS, DROPDOWN MENUS and CHECKBOXES to be validated later in the code, in a type of 'self-contained' (if that makes sense) expression. Such as

if (city == "select") {
alert("Please select a CITY.");
return false;
}

Am I thinking on the right track in why xxxRegExp is used for only some of the VAR's and not others?
Thank you.

Dec 4 '06 #6

Hagelbrakare

Using regular expression to validate a select box is some what overkill.

Expand|Select|Wrap|Line Numbers

 <select name="s_city">

<option value="">- Choose a city -</option>

<option value="New York">New York</option>

</select>

In this case the value of the select will be an empty string if the user didn't selected a city. You can decide what value it will get. You don't need a regular expression because the user simply can not choose something else.

When it comes to the area code you can use a regex. I don't know how such a code looks because I'm not american, but the example you gave would except everything from "a" to "aaaaafffffffffsssssssssdddddddddd".

Dec 4 '06 #7

Hagelbrakare

Checkboxex and radio buttons are a different story. They are checked.

If you have a checkbox you just check if it's checked.

Expand|Select|Wrap|Line Numbers

 if (document.myform.mycb.checked)

do something;

With radio buttons you get the an array with all radio button with the same name. Unless it's just one, then it will work just like a checkbox.

Expand|Select|Wrap|Line Numbers

 <input type="radio" name="car">BMW

<input type="radio" name="car">Mercedes

<input type="radio" name="car">Jaguar
 
if (document.myform.car[0].checked) // you have a bmw

if (document.myform.car[1].checked) // you have a mercedes

if (document.myform.car[2].checked) // you have a jaguar.

Dec 4 '06 #8

TokyoJ

That makes sense. Thank you. I'll make a note of the radio button examples.
BTW I'm not american either. I just happen to live in Alaska for work...hopefully I'll be able to find a job in a warmer climate. :-)
Thank you for your help.
It is greatly appreciated.

Dec 5 '06 #9

Hagelbrakare

You're welcome :) Warmer climate could work for me too :) I live in Sweden. Probably not as cold as Alaska, but not like Thailand either ;)

Dec 5 '06 #10

TokyoJ

Tack själv.
Everying I've seen/read/heard about Sweden has been good. Very few countries can say that.
Can I ask one more question?
Using the two below VAR's, as examples, what script could I use to make sure the phone # and cell # are different? Alert appears if user enters the same # in both fields. (it's not a big issue, just want to learn more).

Thank you for taking the time to educate a lesser skilled person.
var phone = document.feedback.phone.value;
var cell = document.feedback.cell.value;

and
if (!phoneRegExp.test(phone)) {
alert("Please reenter your PHONE NUMBER.");
return false;
}
if (!cellRegExp.test(cell)) {
alert("Please reenter your CELL NUMBER.");
return false;
}

Cheers,

Dec 5 '06 #11

Hagelbrakare

I'm glad that you think that Sweden might be a good place to be :)

This little snippet of code will validate the number and check if they're identical. I was assuming that a phone # can start with "+".

Expand|Select|Wrap|Line Numbers

 function checkPhones() {

    var reNumber = /^[+]?\d+$/;

    var vPhone = document.getElementById("t_phone").value;

    var vCell = document.getElementById("t_cell").value;
 
    if (!reNumber.test(vPhone)) {

        alert("Not valid Phone Number");

        return;

    }

    if (!reNumber.test(vCell)) {

        alert("Not valid Cell Phone Number");

        return;

    }

    if (vPhone == vCell) {

        alert("The numbers are identical");

        return;

    }
 
    alert("They're good");

}

Dec 5 '06 #12

Similar topics

Saving search results in a dictionary

by: Lukas Holcik | last post by:

Hi everyone! How can I simply search text for regexps (lets say <a href="(.*?)">(.*?)</a>) and save all URLs(1) and link contents(2) in a dictionary { name : URL}? In a single pass if it could....

Python

RegExp to validate an email address

by: Andrew DeFaria | last post by:

I was reading my O'Reilly JavaScript The Definitive Guide when I came across RegExp and thought I could tighten up my JavaScript code that checks for a valid email address. Why does the following...

Javascript

Validate EMail with RegExp...

by: Dag Sunde | last post by:

My understanding of regular expressions is rudimentary, at best. I have this RegExp to to a very simple validation of an email-address, but it turns out that it refuses to accept mail-addresses...

Javascript

regexp replace question

by: Bill McCormick | last post by:

Hello, I'm new to VB.NET but have used regexp in Perl and VI. I'd like to read a regular expression from a file and apply it to a string read from another file. The regexp is simple word...

Visual Basic .NET

do you have your own regEXp to validate your string

by: c676228 | last post by:

Hi everyone, I just realized that it's so important to validate each string, I mean 'each' before you insert data from asp page into database. I guess some customers just copy data from some...

ASP / Active Server Pages

validate a date using a regular expression

by: samuelberthelot | last post by:

Hello, I would like to validate a date in a textbox on the onChange event. The date must be in the format 01/01/2007 I would like to use a regular expression to validate it but I'm not very...

Javascript

How to Upload Files using the CGI.pm Module and Perl

by: KevinADC | last post by:

Note: You may skip to the end of the article if all you want is the perl code. Introduction Uploading files from a local computer to a remote web server has many useful purposes, the most...

Perl

Search method or RegExp?

by: Ben Amada | last post by:

Hi all. I know very little about regular expressions, but wanted to use one to validate an email address a user would be entering before the form is submitted. There are many examples out there. ...

Javascript

RegExp post on Wikicodia

by: Mohammad Abou-Basha | last post by:

Hello, I've just posted a snippet on JavaScript RegExp, it's still a stub http://www.wikicodia.com/wiki/JavaScript_Regular_expression Please help me to expand it and put all information about...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice