help a noob validate his form [Archive]

papalazarou

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sign Up</title>

<SCRIPT language=JAVASCRIPT type=TEXT/JAVASCRIPT>

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")
feedbackForm.question.focus()
feedbackForm.question.select()
return false
}

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

// check to see if the email's valid
if (!validEmail(feedbackForm.emailAddr.value)) {
alert("Invalid email address")
feedbackForm.emailAddr.focus()
feedbackForm.emailAddr.select()
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
}

</script>

<style type="text/css">

</style></head>

<body>
<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>
<tr>
<td><span class="style4">County:</span></td>
<td><label>
<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
</select>

</label></td>
</tr>

<tr>
<TD><input type="submit" value="Submit"></TD>
<TD><input type="reset" value="Reset"></TD>
</tr>
</table>
</form>
</body>
</html>

anyhelp would be greatly received. ta!