Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help a noob validate his form

    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:

    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!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    May 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Code:
    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.

  • #5
    New to the CF scene
    Join Date
    May 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •