必填项填写后仍然无效答案

【问题标题】：Required input remains invalid after filled in必填项填写后仍然无效
【发布时间】：2016-01-02 16:05:45
【问题描述】：

我有以下简单的登录表单，密码为“必填”：

 <div id="navbar" class="navbar-collapse collapse">
   <ul class="nav navbar-nav navbar-right">
     <form action="/login" class="navbar-form navbar-right" method="post">
       <div class="form-group">
         <input type="text" class="form-control" name="username" placeholder="Login">
       </div>
       <div class="form-group">
         <input type="password" class="form-control" name="pwd" placeholder="Password" 
                required oninvalid="this.setCustomValidity('Please enter your password')">
       </div>
       <button type="submit" class="btn btn-primary">Log in</button>
     </form>
   </ul>
</div>

如果用户单击“登录”并且pwd 输入为空，则会按预期显示错误消息，但是如果用户在尝试失败后输入密码，则错误消息将再次出现，使“登录”按钮无法交互（即使此时pwd 中有输入）直到pwd 输入失去焦点。 （我使用的是 bootstrap 3.3.5 和 chrome 浏览器。）
我该如何修复这个错误？

【问题讨论】：

似乎对我有用：jsfiddle.net/tddtss44 - 我唯一不知道您使用的是 oninvalid。我尝试在没有密码的情况下提交，它卡在它从不认为密码已填写的状态。我相信这是由您的 oninvalid 声明引起的。当它被删除时，状态问题就消失了。
@RyanRentfro 你也经历过 - 当它被卡住认为没有输入时的状态正是问题所在。正如您所提到的，删除无效的自定义消息会有所帮助。问题是，我怎样才能保留自定义消息？我想对消息进行本地化，所以我想将默认行为保持为 oninvalid 对我来说是不可接受的。
我猜它是您使用“this”的上下文，但我不能肯定地说。我通常从我的标记中绑定这个外部。这意味着我将有一个在启动时运行的脚本，将要求绑定到我的字段，然后在提交表单时对其进行检查/用户在需要时发出警报。但是 - 这个问题：stackoverflow.com/questions/14043589/… 涵盖了我相信您正在尝试完成的主题，看起来需要根据那里的答案重置状态。
@RyanRentfro 感谢您的参考。看起来很相似，并提供了另外两种可能的解决方案。我是这项技术的新手，看起来并非每个教程都提供有关所提供示例的功能和方式的完整信息（我知道，我知道我不应该不假思索地复制粘贴）。

标签： html twitter-bootstrap

【解决方案1】：

oninvalid="!this.value || this.setCustomValidity('请输入密码')"

【讨论】：

【解决方案2】：

问题是自定义有效性错误消息需要再次重置为空白/空，否则即使其中包含正确的数据，该字段也永远不会验证。

您可以使用oninvalid 设置自定义有效性错误消息，然后使用onchange 将消息设置回空白/空，然后在更正时正确验证。

你可以这样做：

<input type="number" oninvalid="this.setCustomValidity('Please enter INTEGER')" onchange="this.setCustomValidity('')" name="int-only" value="0" min="0" step="1">

【讨论】：