挣扎于 jQuery 表单验证

Posted 2023-05-08

【中文标题】挣扎于 jQuery 表单验证

【英文标题】：Struggling with jQuery form validation

【发布时间】：2017-12-20 02:03:29

【问题描述】：

我正在创建一个非常简单的注册表单，只有两个输入和提交按钮。 我遇到的问题是它只会完成一个 if 语句。

这是我制作的 jQuery：

$("#usernameError").hide();
$("#passwordError").hide();

$("#registrationSubmit").click(function()

  if($("#username").val() == "")

    $("#usernameError").show();
    return false;
  

  if($("#passwordReg").val() == "")

    $("#passwordError").show();
    return false;
  
);

这是使用引导程序的 html：

<div class="modal fade" id="add-admin-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header admin">
         Please Enter Details
      </div>
      <div class="modal-body admin">
        <form id="registrationForm" action="registerAction.php" method="post">
          <div class="form-group">
            <label for="">Username</label>
            <input name="username" type="username" class="form-control" id="username" aria-describedby="emailHelp" placeholder="Enter Username">
            <div id="usernameError" class="alert alert-danger pad" role="alert">A Username is required!</div>
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input name="password" type="password" class="form-control" id="passwordReg" placeholder="Password">
            <div id="passwordError" class="alert alert-danger pad" role="alert">A Password is required!</div>
          </div>

          <div class="form-group">
            <button type="submit" id="registrationSubmit" name="registrationSubmit" class="btn btn-success">Ok</button>
            <button class="btn btn-default" data-dismiss="modal">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script src="validations.js"></script>

脚本将验证用户名并显示错误，但不对密码做任何事情。

是因为我使用return false 来阻止表单提交吗？ 我可以用什么代替？

【问题讨论】：

我不明白您为什么接受建议删除退货的答案...此代码工作正常。 return false; 没有问题。看到这个CodePen，我阻止提交只是因为演示在 Codepen 上。 --- 我会向if 建议一个else 部分，以删除错误消息......这是唯一的事情。 --- 其实去掉returns也去掉了validation的效果..表单即使有空也提交。

提交表单时两个输入都为空，它只会出现用户名错误，而不是两者。如果两者都需要显示，我遇到的问题是显示两者。

关于 jQuery Validate 插件的问题绝对没有。请在标记时更加小心。已编辑。

我有点困惑我是如何错误地标记它的。我给它标记了三个不同的东西'jQuery'、'twitter bootstrap'和'validation'。当您单击验证标签时，它不是 jQuery 验证插件独有的。因此，我在任何地方都没有提到它。请让我知道，这样我就不会再犯错误了。

【参考方案1】：

是的，就是这个原因，去掉return语句。如果出现错误，您可以使用布尔变量 errorOccurred 并将其设置为 true。在某处你有一个发布功能，如果发生错误，它不会发布数据。

【讨论】：

非常感谢！已解决，如果 errorOccured 设置为 true，则返回 false！我第一次使用堆栈解决问题（只编码了几个星期）并且会再做一次！再次感谢！

没问题。如果解决了，请采纳答案。

【参考方案2】：

您正在退出您的代码。如果您想在

之后执行代码，请不要这样做

var ValidationFailed = false;

if($("#username").val() == "")

    $("#usernameError").show();
    ValidationFailed = true;


if($("#passwordReg").val() == "")

    $("#passwordError").show();
    ValidationFailed = true;


//.....

return ValidationFailed;