12 Replies - 7296 Views - Last Post: 08 June 2011 - 01:58 PM

#1 imu_1  Icon User is offline

  • D.I.C Regular

Reputation: -6
  • View blog
  • Posts: 256
  • Joined: 03-June 11

Form Validation using Javascript.

Posted 03 June 2011 - 11:49 PM

Hi,
I am creating an evaluation form for my website and i want the user to fill out all the text fields in the form. I am showing errors if in case a user skips a text field. The problem is that if a user skips a text field,an error message pops out but if the user presses the submit button,he is taken to the next page, which is a php script
that echoes what the user has just typed. I dont want that to happen until the user fills out the entire form. How can i stop that from happening ? The user should be taken to the next page only when he fills out the entire form.

I will ver much appreciate your inputs and feedback. Here's my code:

 
        <html>
       <head> 
	           <title> Website Evaluation Page </title>
			  
			  <link rel="stylesheet" type="text/css" href="ReviewPageStyle.css" /> 
	            
	   
          <script type="text/javascript"> 

      function validateRegEx(regex, input, helpText, helpMessage) {
        // See if the input data validates OK
        if (!regex.test(input)) {
          // The data is invalid, so set the help message and return false
          if (helpText != null)
            helpText.innerHTML = helpMessage;
          return false;
        }
        else {
          // The data is OK, so clear the help message and return true
          if (helpText != null)
            helpText.innerHTML = "";
          return true;
        }
      }

	 function validateNonEmpty(inputField, helpText) {
        // See if the input value contains any text
        return validateRegEx(/.+/,
          inputField.value, helpText,
          "Please enter the required text.");
      }
	
		
		function validateLength(minLength, maxLength, inputField, helpText) {
        // See if the input value contains at least minLength but no more than maxLength characters
        if (inputField.value.length < minLength || inputField.value.length > maxLength) {
          // The data is invalid, so set the help message
          if (helpText != null)
            helpText.innerHTML = "Please enter a value " + minLength + " to " + maxLength +
              " characters in length.";
          return false;
        }
        else {
          // The data is OK, so clear the help message
          if (helpText != null)
            helpText.innerHTML = "";
          return true;
        }
      }
			
       function validateEmail(inputField, helpText) 
	   {
        // First see if the input value contains data
        if (!validateNonEmpty(inputField, helpText))
          return false;

        // Then see if the input value is an email address
        return validateRegEx(/^[\w\.-_\+]+@[\w-]+(\.\w{2,3})+$/,
          inputField.value, helpText,
          "Please enter an email address (for example, johndoe@acme.com).");
       }

	  
	  
	  function pressIt(form)
     { 
         if( validateLength(1, 32, form["firstname"], form["firstname_help"]) && 
             validateLength(1, 32, form["lastname"], form["lastname_help"])   &&
		      validateEmail(form["email"], form["email_help"])   
		   )  
		   form.submit(); 
	         
	  else {
	        alert(" Please fill out the required fields"); 
	       }
	 }		
		 </script> 
	  </head>
	   
<body onload="document.getElementById('firstname').focus()">
	   
	   <p><center> To review this webpage,please fill out the form below:</center></p> 
	   <!-- Here's where the form starts-->

	    <form name="validate" action="report.php" method="POST" >
        <table> 
		    <tr>
			  <th>First Name: </th> 
		       <td> 
		           <input type="text" id="firstname" name="firstname" 
                    onblur="validateLength(1, 32, this, document.getElementById('firstname_help'))" /><br />
                  <span id="firstname_help" class="help"></span>
				</td>
			</tr>

			  
			 <tr>
			  <th> Last Name: </th> 
			      <td> 
		                <input type="text" id="lastname" name="lastname"  
                        onblur="validateLength(1, 32, this, document.getElementById('lastname_help'))" /><br />
                        <span id="lastname_help" class="help"></span>
				   </td>
			</tr>	   
			
			<tr>	   
              <th> Email: </th>

                  <td>
			           <input type="text" id="email" name="email" 
					   onblur="validateEmail(this, document.getElementById('email_help'))" /><br />
					  <span id="email_help" class="help"></span>
                  </td>
				  
            </tr>  
			 
			 <tr>
			  <th>Which aspects of the website caught your eyes?</th>
                 <td>
			           <input type="text" id="aspect" name="aspect" 
					    onblur="validateLength(1, 32, this, document.getElementById('aspect_help'))" /><br />
                        <span id="aspect_help" class="help"></span>
                 </td>

              </tr>
		      
			  <tr>
			  <th>Which aspect of the website needs improvement?</th>
                 <td>
			             <input type="text" id="improvement" name="improvement" size="32" 
						  onblur="validateLength(1, 32, this,               document.getElementById('improvement_help'))" /><br />
                        <span id="improvement_help" class="help"></span>
                 </td>
             </tr>
    
                   <tr>
			<td> 
			 <input type="submit" value="Submit"  onclick="pressIt(this.form);" />
                   </td>
	       </tr>

      </table>
   </form>
  
  </body>
 </html>



Is This A Good Question/Topic? 0
  • +

Replies To: Form Validation using Javascript.

#2 noorahmad  Icon User is offline

  • Untitled
  • member icon

Reputation: 209
  • View blog
  • Posts: 2,290
  • Joined: 12-March 09

Re: Form Validation using Javascript.

Posted 04 June 2011 - 01:28 AM

Since you are submitting your form with javascript, why not changing submit to button type
<input type="button" value="Submit"  onclick="pressIt(this.form);" />


<b>Edit</b>
Your full code:
 
        <html>
       <head> 
	           <title> Website Evaluation Page </title>
			  
			  <link rel="stylesheet" type="text/css" href="ReviewPageStyle.css" /> 
	            
	   
          <script type="text/javascript"> 

      function validateRegEx(regex, input, helpText, helpMessage) {
        // See if the input data validates OK
        if (!regex.test(input)) {
          // The data is invalid, so set the help message and return false
          if (helpText != null)
            helpText.innerHTML = helpMessage;
          return false;
        }
        else {
          // The data is OK, so clear the help message and return true
          if (helpText != null)
            helpText.innerHTML = "";
          return true;
        }
      }

	 function validateNonEmpty(inputField, helpText) {
        // See if the input value contains any text
        return validateRegEx(/.+/,
          inputField.value, helpText,
          "Please enter the required text.");
      }
	
		
		function validateLength(minLength, maxLength, inputField, helpText) {
        // See if the input value contains at least minLength but no more than maxLength characters
        if (inputField.value.length < minLength || inputField.value.length > maxLength) {
          // The data is invalid, so set the help message
          if (helpText != null)
            helpText.innerHTML = "Please enter a value " + minLength + " to " + maxLength +
              " characters in length.";
          return false;
        }
        else {
          // The data is OK, so clear the help message
          if (helpText != null)
            helpText.innerHTML = "";
          return true;
        }
      }
			
       function validateEmail(inputField, helpText) 
	   {
        // First see if the input value contains data
        if (!validateNonEmpty(inputField, helpText))
          return false;

        // Then see if the input value is an email address
        return validateRegEx(/^[\w\.-_\+]+@[\w-]+(\.\w{2,3})+$/,
          inputField.value, helpText,
          "Please enter an email address (for example, johndoe@acme.com).");
       }

	  
	  
	  function pressIt(form)
     { 
         if( validateLength(1, 32, form["firstname"], form["firstname_help"]) && 
             validateLength(1, 32, form["lastname"], form["lastname_help"])   &&
		      validateEmail(form["email"], form["email_help"])   
		   )  
		   form.submit(); 
	         
	  else {
	        alert(" Please fill out the required fields"); 
	       }
	 }		
		 </script> 
	  </head>
	   
<body onload="document.getElementById('firstname').focus()">
	   
	   <p><center> To review this webpage,please fill out the form below:</center></p> 
	   <!-- Here's where the form starts-->

	    <form name="validate" action="report.php" method="POST" >
        <table> 
		    <tr>
			  <th>First Name: </th> 
		       <td> 
		           <input type="text" id="firstname" name="firstname" 
                    onblur="validateLength(1, 32, this, document.getElementById('firstname_help'))" /><br />
                  <span id="firstname_help" class="help"></span>
				</td>
			</tr>

			  
			 <tr>
			  <th> Last Name: </th> 
			      <td> 
		                <input type="text" id="lastname" name="lastname"  
                        onblur="validateLength(1, 32, this, document.getElementById('lastname_help'))" /><br />
                        <span id="lastname_help" class="help"></span>
				   </td>
			</tr>	   
			
			<tr>	   
              <th> Email: </th>

                  <td>
			           <input type="text" id="email" name="email" 
					   onblur="validateEmail(this, document.getElementById('email_help'))" /><br />
					  <span id="email_help" class="help"></span>
                  </td>
				  
            </tr>  
			 
			 <tr>
			  <th>Which aspects of the website caught your eyes?</th>
                 <td>
			           <input type="text" id="aspect" name="aspect" 
					    onblur="validateLength(1, 32, this, document.getElementById('aspect_help'))" /><br />
                        <span id="aspect_help" class="help"></span>
                 </td>

              </tr>
		      
			  <tr>
			  <th>Which aspect of the website needs improvement?</th>
                 <td>
			             <input type="text" id="improvement" name="improvement" size="32" 
						  onblur="validateLength(1, 32, this,               document.getElementById('improvement_help'))" /><br />
                        <span id="improvement_help" class="help"></span>
                 </td>
             </tr>
    
                   <tr>
			<td> 
			 <input type="button" value="Submit"  onclick="pressIt(this.form);" />
                   </td>
	       </tr>

      </table>
   </form>
  
  </body>
 </html>


This post has been edited by noorahmad: 04 June 2011 - 01:29 AM

Was This Post Helpful? 0
  • +
  • -

#3 imu_1  Icon User is offline

  • D.I.C Regular

Reputation: -6
  • View blog
  • Posts: 256
  • Joined: 03-June 11

Re: Form Validation using Javascript.

Posted 04 June 2011 - 02:23 AM

Dear ahmad,
I am still ocnfused on what you just pin pointed. Can you be more clear ?


Thanks.
Was This Post Helpful? 0
  • +
  • -

#4 noorahmad  Icon User is offline

  • Untitled
  • member icon

Reputation: 209
  • View blog
  • Posts: 2,290
  • Joined: 12-March 09

Re: Form Validation using Javascript.

Posted 04 June 2011 - 02:28 AM

...<input type="submit" value="Submit" onclick="pressIt(this.form);" />
line above is submitting a form in any case. if you want to validate and submit the form then try to use a function in javascript and on formsubmit event use it.

try this: Dynamic Form Validation
Was This Post Helpful? 0
  • +
  • -

#5 imu_1  Icon User is offline

  • D.I.C Regular

Reputation: -6
  • View blog
  • Posts: 256
  • Joined: 03-June 11

Re: Form Validation using Javascript.

Posted 04 June 2011 - 04:06 AM

Ahmad,
If you look at my pressIt() function, you will see that i have created an error message which pops up whenever a submit button is pressed and one or more textfields are empty. This is exactly what you did in your val()
function.Yet, that doesnt guarantee that the alert message will stop the script from shoeing the next page.
How can you stop the script from not showing the next page until all the fields are filled out ?
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,236
  • Joined: 08-June 10

Re: Form Validation using Javascript.

Posted 04 June 2011 - 05:06 AM

all that Javascript validation is for naught if I disable Javascript. you have to make the full validation again on the server.
Was This Post Helpful? 1
  • +
  • -

#7 japanir  Icon User is offline

  • jaVanir
  • member icon

Reputation: 1010
  • View blog
  • Posts: 3,025
  • Joined: 20-August 09

Re: Form Validation using Javascript.

Posted 04 June 2011 - 07:03 AM

To prevent the form from being submitted and move to a new page, your validate function should return false in case the form is invalid.
Here is a very basic example:
http://www.w3schools..._validation.asp
Was This Post Helpful? 0
  • +
  • -

#8 imu_1  Icon User is offline

  • D.I.C Regular

Reputation: -6
  • View blog
  • Posts: 256
  • Joined: 03-June 11

Re: Form Validation using Javascript.

Posted 08 June 2011 - 02:11 AM

japanir, ahmad, and others,

I have checked your examples online but they are not quite helping. I get the concept but then i cannot fit that concept in my code. As far the issue of returning false in my function is concernced, i did that and it still didnt work.I dont wanna copy and paste the updated version becaus eit is really nothing much thna an addtiion of a single return statement.
Can anyone show me where specifically in my code i should make the changes ?
Was This Post Helpful? 0
  • +
  • -

#9 arvindthakur  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 133
  • Joined: 07-June 11

Re: Form Validation using Javascript.

Posted 08 June 2011 - 02:29 AM

Hi imu_1,


I have edited few lines in your code.Now it will work fine.


 <html>
       <head> 
	           <title> Website Evaluation Page </title>
			  
			  <link rel="stylesheet" type="text/css" href="ReviewPageStyle.css" /> 
	            
	   
          <script type="text/javascript"> 

      function validateRegEx(regex, input, helpText, helpMessage) {
        // See if the input data validates OK
        if (!regex.test(input)) {
          // The data is invalid, so set the help message and return false
          if (helpText != null)
            helpText.innerHTML = helpMessage;
          window.event.returnValue = false;
        }
        else {
          // The data is OK, so clear the help message and return true
          if (helpText != null)
            helpText.innerHTML = "";
          window.event.returnValue = true;
        }
      }

	 function validateNonEmpty(inputField, helpText) {
        // See if the input value contains any text
        return validateRegEx(/.+/,
          inputField.value, helpText,
          "Please enter the required text.");
      }
	
		
		function validateLength(minLength, maxLength, inputField, helpText) {
        // See if the input value contains at least minLength but no more than maxLength characters
        if (inputField.value.length < minLength || inputField.value.length > maxLength) {
          // The data is invalid, so set the help message
          if (helpText != null)
            helpText.innerHTML = "Please enter a value " + minLength + " to " + maxLength +
              " characters in length.";
          window.event.returnValue = false;
        }
        else {
          // The data is OK, so clear the help message
          if (helpText != null)
            helpText.innerHTML = "";
          window.event.returnValue = true;
        }
      }
			
       function validateEmail(inputField, helpText) 
	   {
        // First see if the input value contains data
        if (!validateNonEmpty(inputField, helpText))
          window.event.returnValue = false;

        // Then see if the input value is an email address
        return validateRegEx(/^[\w\.-_\+]+@[\w-]+(\.\w{2,3})+$/,
          inputField.value, helpText,
          "Please enter an email address (for example, johndoe@acme.com).");
       }

	  
	  
	  function pressIt(form)
     { 
         if( validateLength(1, 32, form["firstname"], form["firstname_help"]) && 
             validateLength(1, 32, form["lastname"], form["lastname_help"])   &&
		      validateEmail(form["email"], form["email_help"])   
		   )  
		   form.submit(); 
	         
	  else {
	        alert(" Please fill out the required fields");
            window.event.returnValue = false;
	       }
	 }		
		 </script> 
	  </head>
	   
<body onload="document.getElementById('firstname').focus()">
	   
	   <p><center> To review this webpage,please fill out the form below:</center></p> 
	   <!-- Here's where the form starts-->

	    <form name="validate" action="report.php" method="POST" >
        <table> 
		    <tr>
			  <th>First Name: </th> 
		       <td> 
		           <input type="text" id="firstname" name="firstname" 
                    onblur="validateLength(1, 32, this, document.getElementById('firstname_help'))" /><br />
                  <span id="firstname_help" class="help"></span>
				</td>
			</tr>

			  
			 <tr>
			  <th> Last Name: </th> 
			      <td> 
		                <input type="text" id="lastname" name="lastname"  
                        onblur="validateLength(1, 32, this, document.getElementById('lastname_help'))" /><br />
                        <span id="lastname_help" class="help"></span>
				   </td>
			</tr>	   
			
			<tr>	   
              <th> Email: </th>

                  <td>
			           <input type="text" id="email" name="email" 
					   onblur="validateEmail(this, document.getElementById('email_help'))" /><br />
					  <span id="email_help" class="help"></span>
                  </td>
				  
            </tr>  
			 
			 <tr>
			  <th>Which aspects of the website caught your eyes?</th>
                 <td>
			           <input type="text" id="aspect" name="aspect" 
					    onblur="validateLength(1, 32, this, document.getElementById('aspect_help'))" /><br />
                        <span id="aspect_help" class="help"></span>
                 </td>

              </tr>
		      
			  <tr>
			  <th>Which aspect of the website needs improvement?</th>
                 <td>
			             <input type="text" id="improvement" name="improvement" size="32" 
						  onblur="validateLength(1, 32, this,               document.getElementById('improvement_help'))" /><br />
                        <span id="improvement_help" class="help"></span>
                 </td>
             </tr>
    
                   <tr>
			<td> 
			 <input type="submit" value="Submit"  onclick="pressIt(this.form);" />
                   </td>
	       </tr>

      </table>
   </form>
  
  </body>
 </html>

This post has been edited by Dormilich: 08 June 2011 - 03:00 AM
Reason for edit:: please use [code] /* your code source here */ [/code] tags when posting code

Was This Post Helpful? 0
  • +
  • -

#10 imu_1  Icon User is offline

  • D.I.C Regular

Reputation: -6
  • View blog
  • Posts: 256
  • Joined: 03-June 11

Re: Form Validation using Javascript.

Posted 08 June 2011 - 03:28 AM

Arvind,
I am sorry but this didnt work out.When you press the button, it sends you to the next page, which is what i want to stop. I wanna make sure that that all the field are filled up before moving on to the confirmation page.
Was This Post Helpful? 0
  • +
  • -

#11 arvindthakur  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 133
  • Joined: 07-June 11

Re: Form Validation using Javascript.

Posted 08 June 2011 - 03:57 AM

Well Can I know which browser you are using?
Was This Post Helpful? 0
  • +
  • -

#12 imu_1  Icon User is offline

  • D.I.C Regular

Reputation: -6
  • View blog
  • Posts: 256
  • Joined: 03-June 11

Re: Form Validation using Javascript.

Posted 08 June 2011 - 06:53 AM

I am using mozilla firefox.
Was This Post Helpful? 0
  • +
  • -

#13 ahmad_511  Icon User is offline

  • MSX
  • member icon

Reputation: 131
  • View blog
  • Posts: 722
  • Joined: 28-April 07

Re: Form Validation using Javascript.

Posted 08 June 2011 - 01:58 PM

Hi there,
as japanir said before, your pressIt function must return true or false, but it's not enough
the onclick property should look something like this:
<input type="submit" value="Submit"  onclick="return pressIt(this.form);" />



see the return?

Hope it helps
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1