...

View Full Version : help a noob validate his form



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">
<!--
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; }
-->
</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!

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.

papalazarou
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.

tomws
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.

papalazarou
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum