View Full Version : help a noob validate his form

05-01-2008, 06:05 PM
ok i have created a basic form in which users enter their name email and select their county from a list menu. when the submit button is pressed this information is taken and stored on a mysql database.

i have added javascript validation but the problem im having is on clicking submit it just seems to bypass my validation and submit the data straight to the database. i wish validation to be performed on clicking submit and only sent to the database once validation is confirmed.

heres my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sign Up</title>


function validName(wholeName){

if (wholeName == "") {
return false
return true

function validEmail(email) {
invalidChars = " /:,;"

if (email == "") { // cannot be empty
return false
for (i=0; i<invalidChars.length; i++) { // does it contain any invalid characters?
badChar = invalidChars.charAt(i)
if (email.indexOf(badChar,0) > -1) {
return false
atPos = email.indexOf("@",1) // there must be one "@" symbol
if (atPos == -1) {
return false
if (email.indexOf("@",atPos+1) != -1) { // and only one "@" symbol
return false
periodPos = email.indexOf(".",atPos)
if (periodPos == -1) { // and at least one "." after the "@"
return false
if (periodPos+3 > email.length) { // must be at least 2 characters after the "."
return false

return true

function validForm(feedbackForm) {
//Check to see if the question is valid
if (!validQuestion(feedbackForm.question.value)) {
alert("Please enter a question")
return false

// check to see if the names valid
if (!validName(feedbackForm.wholeName.value)) {
alert("Invalid Name")
return false

// check to see if the email's valid
if (!validEmail(feedbackForm.emailAddr.value)) {
alert("Invalid email address")
return false

// make sure they enter a county
countyChoice = feedbackForm.county.selectedIndex
if (feedbackForm.county.options[countyChoice].value == "") {
alert("You must pick a county")
return false

return true


<style type="text/css">
body,td,th {
font-size: 12px;
color: #FFFFFF;
body {
background-color: #006699;
.style1 {
font-family: Corbel, "Berlin Sans FB", "Lithos Pro Regular";
font-size: 16px;
.style4 {font-family: Corbel; font-size: 16px; }

<form id="signup" name="signup" onsubmit="return validForm(this)" method="post" action="feedback.php">
<table width="340" border="0" cellpadding="8" cellspacing="8" summary="feedback form">

<tr><td width="96"><span class="style1">Name:</span></td>
<td width="188"><input type=text name="wholeName" size="25" /></td></tr>

<tr><td><span class="style4">Email address:</span></td>
<td><input type=text name="emailAddr" size="25" /></td></tr>
<td><span class="style4">County:</span></td>
<select name="county" size="1" id="county">

<option value="" selected>Choose a county
<option value=Avon>Avon
<option value=Bedfordshire>Bedfordshire
<option value=Berkshire>Berkshire
<option value=Buckinghamshire>Buckinghamshire
<option value=Cambridgeshire>Cambridgeshire
<option value=Cheshire>Cheshire
<option value=Cleveland>Cleveland
<option value=Cornwall>Cornwall
<option value=Cumbria>Cumbria
<option value=Derbyshire>Derbyshire
<option value=Devon>Devon
<option value=Dorset>Dorset
<option value=Durham>Durham
<option value=Essex>Essex
<option value=Gloucestershire>Gloucestershire
<option value=Hampshire>Hampshire
<option value=Hereford>Hereford & Worcester
<option value=Hertfordshire>Hertfordshire
<option value=Humberside>Humberside
<option value=Kent>Kent
<option value=Lancashire>Lancashire
<option value=Leicestershire>Leicestershire
<option value=lincolnshire>Lincolnshire
<option value=London>London
<option value=Manchester>Manchester
<option value=Merseyside>Merseyside
<option value=Norfolk>Norfolk
<option value=Northamptonshire>Northamptonshire
<option value=Northumberland>Northumberland
<option value=Nottinghamshire>Nottinghamshire
<option value=Oxfordshire>Oxfordshire
<option value=Shropshire>Shropshire
<option value=Somerset>Somerset
<option value=Staffordshire>Staffordshire
<option value=Suffolk>Suffolk
<option value=Surrey>Surrey
<option value=Sussex>Sussex
<option value=Tyneandwear>Tyne & Wear
<option value=Warwickshire>Warwickshire
<option value=Westmidlands>West Midlands
<option value=Wiltshire>Wiltshire
<option value=Yorkshire>Yorkshire


<TD><input type="submit" value="Submit"></TD>
<TD><input type="reset" value="Reset"></TD>

anyhelp would be greatly received. ta!

Philip M
05-01-2008, 06:18 PM
function validName(wholeName) {
if (wholeName == "") {
return false
return true

If the name is valid (but anything other than "" such as a single space or a number is hardly a sufficient test!) then the script returns true, and the form is submitted.

You should have only one instance of "return true" in your total validation.

05-01-2008, 07:28 PM
thanks for your reply. although i need to stress i really am a noob when it comes to javascript, the code above i had wrote years ago for a different project which seems to work fine.

so what exactly are you suggesting i do to get this working? where shud i have the return true statement? i've been messing around a bit but i still just get the same problem of the data not being validated before its sent to its database.

i understand the name is hardly a sufficient test but wasnt overly important at the time being, i still get no validation even if i do enter nothing.

05-01-2008, 11:16 PM
if (!validQuestion(feedbackForm.question.value)) {

First problem: validQuestion() does not exist. The javascript is apparently barfing because of that and perhaps returning and an error, which != false, the return value required to keep from forwarding the form values to the next page.

Furthermore, feedbackForm.question does not exist.

To parrot what Philip has already pointed out, just checking for an empty string is a bit weak for validation. You can probably gather some useful js validation scripts with a bit of Google time. Better to take some time and lift some free code (or learn it) than to get an inordinate amount of garbage due to poor coding.

05-02-2008, 01:44 AM
hey thanks very much dunno how i missed that. its working all fine now, just have to tweak the name validation a bit. thanks again