Javascript not running before submitting to php file

Question

I'm learning more about PHP/Javascript, trying to set up a basic website. I've got the full thing up and running, but there is no validation on registration and whatnot. I'm trying to use Javascript to validate the form before submitting it, but it's not working for me. Here is my page:

<script language="JavaScript" type="text/javascript">
OK = false;
function validateEmail() {
    var x = document.forms["form1"]["myemail"].value;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if(atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
        alert("Not a valid e-mail address");
        return false;
    }
}

function notShortUsername() {
    var x = document.forms["form1"]["myusername"].value;
    if(x.value.length < 6) {
        // set the focus to this input
        OK = false;
    }
    OK = true;
}

function notShortPassword() {
    var x = document.forms["form1"]["mypassword"].value;
    if(x.value.length < 6) {
        alert(helperMsg);
        elem.focus();
        // set the focus to this input
        OK = false;
    }
    OK = true;
}

function validate () {
    notShortUsername();
    notShortPassword();
    validateEmail();

    if(OK) {
        form.submit();
        return true;
    } else {
        //do something else
        alert("You did it wrong!");
        return false;
    }
} 
</script>

<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
  <tr>
  <form name="form1" method="post" action="registervalidation.php" onsubmit="return validate">
    <td>
      <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
        <tr>
          <td colspan="3"><strong>Member Login </strong></td>
        </tr>
        <tr>
          <td width="78">Username</td>
          <td width="6">:</td>
          <td width="294">
            <input name="myusername" type="text" id="myusername" />
          </td>
        </tr>
        <tr>
          <td>Password</td>
          <td>:</td>
          <td>
            <input name="mypassword" type="password" id="mypassword" />
          </td>
        </tr>
        <tr>
          <td>Email</td>
          <td>:</td>
          <td>
            <input name="myemail" type="text" id="myemail">
          </td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>
            <input type="submit" name="Submit" value="Complete Registration">
            <input type="submit" name="Submit" value="Cancel">
          </td>
        </tr>
      </table>
    </td>
  </form>
  </tr>
</table>

I've also tried using this: http://docs.jquery.com/Plugins/Validation

The issue with it is it won't validate when the item loses focus, and still submits the php anyways.

No, I'm also doing some validation on the php that pushes back to the registration page, but I want some validation on the client side that checks formatting before it runs the php. — Spencer Cole
– Spencer Cole, Commented Nov 4, 2011 at 14:46

Marc B · Accepted Answer · 2011-11-04 14:37:13Z

4

onsubmit="return validate();"

Do not forget the ();

edited Nov 4, 2011 at 14:37

Marc B

362k44 gold badges433 silver badges508 bronze badges

answered Nov 4, 2011 at 14:32

Naftali

147k41 gold badges247 silver badges304 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Spencer Cole Over a year ago

Yeah, that didn't fix it. It's still running to the php.

Naftali Over a year ago

@SpencerCole Try this: onsubmit="validate(); return false;"

Spencer Cole Over a year ago

No. Still running to the php.

Spencer Cole Over a year ago

My issue is that it's not Java or Objective-C, this stuff is all foreign to me.

Naftali Over a year ago

@SpencerCole again im no debugger, take your code apart piece by piece and you will find the error.

Toto · Accepted Answer · 2011-11-04 15:00:03Z

0

change this:

var x = document.forms["form1"]["myusername"].value;
if(x.value.length < 6) {

to:

var x = document.forms["form1"]["myusername"].value;
if(x.length < 6) {

and this:

var x = document.forms["form1"]["mypassword"].value;
if(x.value.length < 6) {

to:

var x = document.forms["form1"]["mypassword"].value;
if(x.length < 6) {

In each case, var x already contains the value so you get the length directly by x.length

edited Nov 4, 2011 at 15:00

answered Nov 4, 2011 at 14:52

Toto

91.7k63 gold badges97 silver badges135 bronze badges

Comments

Mark Achée · Accepted Answer · 2011-11-04 15:02:21Z

0

Test your validate function outside the form submit:

<a href="#" onclick="validate();">test</a>

You'll see an error in the console letting you know x isn't defined.

Uncaught TypeError: Cannot read property 'length' of undefined

So the script stops executing and never returns false, which allows the form to post.

answered Nov 4, 2011 at 15:02

Mark Achée

5171 gold badge4 silver badges14 bronze badges

Collectives™ on Stack Overflow

Javascript not running before submitting to php file

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related