Simple Form Verification Question

Hey,


I have the following javascript in the body of my html file:

And then call it to verify a form on submit. Here's a simplified version of the form:

<form action="process.php" method="POST" onSubmit="var the_result=checkEmail();return the_result;" name = "regForm">
  <input type="password" name="pass"> 
  <input type="password" name="pass2"> 
  <input type="text" name="email"> 
  <input type="text" name="email2"> 
  <input type="submit">
</form>

HTML:

The aim is to verify that the password and email have been entered correctly. However it still submits the form even if the passwords/emails are different...

Where have I made a mistake? I'm a newbie to javascript so please forgive me if I made a stupid mistake!


Thanks,

Hodge

 

Try this:

On your javascript function where returning true:

...
// If no errors found
if (error_string == ""){
  var myForm = document.getElementById("regForm");
  myForm.submit();
  return true;
}
....

Code (markup):

On your html:

<form action="process.php" method="POST" id="regForm" name="regForm" onSubmit="checkEmail();">
....
</form>  

Code (markup):

 

Heya,


Thanks for your reply. I tried that but it still doesn't work... Here's the javascript now:

	  <script type = "text/javascript">
	  <!-- Hide from older browsers
	  
	  function checkEmail(){
	    var error_string = "";
	    
	    var pass   = window.document.regForm.pass.value;
	    var pass2  = window.document.regForm.pass2.value;
	    var email  = window.document.regForm.email.value;
	    var email2 = window.document.regForm.email2.value;
	    
	    alert (pass);
	    alert (pass2);
	    alert (email);
	    alert (email2);
	   
	    // Check if passwords match
		if (pass != pass2){
			error_string += "  * Your Passwords Don't Match!\n";
		}
		// Check if email addresses match
		if (email != email2){
			error_string += "  * Your Email Addresses Don't Match!";
		}
		// If no errors found
		if (error_string == ""){
		    var myForm = document.getElementById("regForm");
            myForm.submit();
			return true;
		}
		// Else errors found
		else {
			error_string = "We found the following errors:\n" + error_string;
			alert (error_string);
			return false;
		}
	  }
	  
	  // End hide -->
	  </script>

Code (markup):

And the form in full this time:

<form action="process.php" method="POST" id="regForm" name="regForm" onSubmit="checkEmail();">
  <table align="left" border="0" cellspacing="0" cellpadding="3">
    <tr>
	  <td>
	    Username:
	  </td>
	  <td>
	    <input type="text" name="user" maxlength="30" value="<? echo $form->value("user"); ?>">
	  </td>
	  <td>
	    <? echo $form->error("user"); ?>
	  </td>
    </tr>
    <tr>
	  <td>
	    Password:
	  </td>
	  <td>
	    <input type="password" name="pass" maxlength="30" value="<? echo $form->value("pass"); ?>">
	  </td>
	  <td>
	    <? echo $form->error("pass"); ?>
	  </td>
    </tr>
    <tr>
	  <td>
	    Confirm Password:
	  </td>
	  <td>
	    <input type="password" name="pass2" maxlength="30">
	  </td>
	  <td>
	    <? echo $form->error("pass"); ?>
	  </td>
    </tr>
    <tr>
	  <td>
	    Email:
	  </td>
	  <td>
	    <input type="text" name="email" maxlength="50" value="<? echo $form->value("email"); ?>">
	  </td>
	  <td>
	    <? echo $form->error("email"); ?>
	  </td>
	</tr>
	<tr>
	  <td>
	    Confirm Email:
	  </td>
	  <td>
	    <input type="text" name="email2" maxlength="50">
	  </td>
	  <td>
	    <? echo $form->error("email"); ?>
	  </td>
	</tr>
    <tr>
	  <td colspan="2" align="right">
	    <input type="hidden" name="subjoin" value="1">
        <input type="submit" value="Join!">
	  </td>
	</tr>
  </table>
</form>

Code (markup):

What am I still doing wrong?

 

Well, change this on your html (it's working for me):
- Remove onSubmit from "form" tag
- Replace last "input" with a "button"

<form action="process.php" method="POST" id="regForm" name="regForm"> 
....
      <button type="button" onclick="checkEmail()">Join!</button>
	  </td>
	</tr>
  </table>
</form>

Code (markup):

 

*EDIT* The javascript code was placed in a cell before. When I moved it out of the table it suddenly started working! Is this normal???

Oh well at least it works now

Thanks!!! Rep added

 

I usually put javascript code inside "head" tag. Maybe your original code was failing because of that
.

 

I'm using a template file and didn't want to put it in the head to try and reduce page size for the other pages.

Not sure why it doesn't work when it's in a table but I've learned my lesson

 

Then why dont you put it in a .js file and include it in the page by useing

<script language="javascript" type="text/javascript" src="javascript file name"></script>

put that in ur head tags.

 

But then won't that be included across my whole site if I'm using a standard template for all my pages?

Anyway I found out the problem by the way after about an hour of frustration. It was such a stupid mistake as well!!!!

I was using PHP to print out the code and therefore the "\n" actually put the end of the error_message on a new line instead of including "\n" within the error_message. I just needed to escape that, i.e. "\\n" and it all worked fine