CODEWITHSUNDEEP
javascripthtml
Tom Hanson
Tom Hanson

Reputation: 945

Form submit cancellation with Javascript not working

I am trying to build a registration script and need all the form items to be verified or submitting must canceled. I have looked on many forums and many answers and I don't see how my answer differs. HTML

<form onSubmit='checkAll()' method='post' action='mydestination.php'>
<table>
  <tr>
    <td><input type='text' name='username' id='txtUsername' class='textboxLargeStyle' placeholder='Username' onChange='checkUsername("false")'/></td>
  </tr>
  <tr>
    <td><input type='text' name='email' id='txtEmail' class='textboxLargeStyle' placeholder='Email Address' onChange='checkEmail()'/></td>
  </tr>
  <tr>
    <td><input type='password' id='pwd1' name='password' class='textboxLargeStyle' placeholder='Password' onkeyup='checkPassword()'/></td>
  </tr>
  <tr>
    <td><input type='password' id='pwd2' name='password2' class='textboxLargeStyle' placeholder='Re-type Password'  onkeyup='checkPasswordMatches()'/></td>
  </tr>
  <tr>
    <td><input type='submit' class='buttonLargeStyle' value='Sign Up'/></td>
  </tr>
  <tr>
    <td colspan='2'><small id='Error'>Ensure you have all ticks before submitting! Hover over a cross to see the error.</small></td>
  </tr>
</table>
</form>

JAVASCRIPT

function checkAll()
{
if(usernameOK == true)
{
    if(emailOK == true)
    {
        if(passwordOK == true)
        {
            return true;
        }
    }
}
$('#Error').fadeIn(100);
return false;
}

When I click submit and the items are not met, the form still submits.

Upvotes: 0

Views: 83

Answers (2)

Seth McClaine
Seth McClaine

Reputation: 10040

function checkAll(e)
{
  e.stopPropogation(); //Stops bubbling
  e.preventDefault(); //prevents anything else that would happen from the click (submit)

  if(usernameOK  && (emailOK && passwordOK) {
   e.currentTarget.submit();//Submits form
  }

  $('#Error').fadeIn(100);
  return false;
}

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388436

You have to return the false value returned by checkAll from the onsubmit handler

<form onSubmit='return checkAll()' method='post' action='mydestination.php'>

Upvotes: 2

Related Questions