Question

点击“检查”按钮后，我想在无效输入元素周围做一个红色边框。问题是我不能使用框架或插件，只能使用HTML，CSS和JavaScript 。我试图在网上搜索一些小时，我发现的只是使用:valid和:invalid伪类。它们工作正常，但我只想在点击“检查”按钮后显示红色边框。

这是我的代码

input:invalid {
  border: 1px solid red;
}

<html>
<head>
  <title>Invalid Form Test</title>
</head>
<body>
  <div>
    <form id="login" method="post">
      <div>
        <label for="username">Username</label>
        <input type="text" id="username" placeholder="Username" name="username" required />
      </div>
      <div>
        <label for="password">Password</label>
        <input type="password" id="password" placeholder="Password" name="password" required />
      </div>
      <div>
        <button id="check-btn">Check</button>
      </div>
    </form>
  </div>
</body>
</html>

如果可能的话，我还想删除默认的浏览器工具提示和红色轮廓（即我只想要无效元素的样式）。

提前感谢您的帮助！

Answer 1

这是一种使用invalid事件来防止工具提示出现的方法，并在触发无效事件后向表单添加一个类。修改CSS，我做了它，只有当这个类存在时才显示红色边框。

这是一个IE 10 + / Edge 14+解决方案。

document.getElementById('login').addEventListener( "invalid", function( event ) {
  this.classList.add('check');
  event.preventDefault();
}, true);

.check input:invalid {
  border-color: red;
}

<html>
<head>
  <title>Invalid Form Test</title>
</head>
<body>
  <div>
    <form id="login" method="post">
      <div>
        <label for="username">Username</label>
        <input type="text" id="username" placeholder="Username" name="username" required />
      </div>
      <div>
        <label for="password">Password</label>
        <input type="password" id="password" placeholder="Password" name="password" required />
      </div>
      <div>
        <button id="check-btn">Check</button>
      </div>
    </form>
  </div>
</body>
</html>

无效的表单输入 - 只有HTML，CSS，JAVASCRIPT的红色边框

1 个答案: