简体   繁体   English

表单提交取消,Javascript无效

[英]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 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 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. 当我单击“提交”并且未满足项目时,表单仍会提交。

您必须从onsubmit处理程序返回checkAll返回的false

<form onSubmit='return checkAll()' method='post' action='mydestination.php'>
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;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM