如何在输入字段中添加红色边框以及必需属性？

Question

目前，如果具有required属性的输入字段为空，则它将显示浏览器的默认错误消息。如果我删除此属性，由于我的JavaScript代码，它将在输入字段上显示红色边框。我如何同时显示两者？

$("form").submit(function(e) {
  e.preventDefault();
  var title = document.getElementById('title');
  if (!title.value) {
    title.classList.add('error');
    setTimeout(function() {
      title.classList.remove('error');
    }, 300);
  }
});

.error {
  position: relative;
  animation: shake .1s linear;
  animation-iteration-count: 3;
  border: 1px solid red;
}

@keyframes shake {
  0% {
    left: -5px;
  }
  100% {
    right: -5px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="title">
  <input type="submit">
</form>

Answer 1

您可以像这样实现它：

$("form").submit(function(e) {
  e.preventDefault();
  // ....
});

$("form input").on("invalid", function(event) {
  $('#title').addClass('error');
  setTimeout(function() {
    $('#title').removeClass('error');
  }, 500);
});

.error {
  position: relative;
  animation: shake .1s linear;
  animation-iteration-count: 3;
  border: 1px solid red;
  outline: none;
}

@keyframes shake {
  0% {
    left: -5px;
  }
  100% {
    right: -5px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="title" required>
  <input type="submit">
</form>

Answer 2

使用CSS。

最好也将它用于无效字段（type=number字段中的文本或任何其他无效值）。

@keyframes shake3 {
    0% {left: -5px}
    16% {left: 5px}
    33% {left: -5px}
    49% {left: 5px}
    66% {left: -5px}
    80% {left: 5px}
    100% {left: 0}
} /* And @keyframes with prefixes */

input:invalid {
  border: 2px solid red;
  animation-name: shake3;
  animation-duration: .4s;
  position: relative;
}

<input required >

如果你想只在你想要的时候显示它，用input:invalid替换.submited input:invalid并将.submited类添加到你的表单来激活样式。

Answer 3

function validate() {
  var title = document.getElementById('title');
  if (!title.value) {
    title.classList.add('error');
    setTimeout(function() {
      title.classList.remove('error');
    }, 300);
  }
}

.error {
  border: 5px solid red;
}

<form>
  <input type="text" id="title" required>
  <input type="submit" onclick="validate()">
</form>

从onsubmit更改为onclick并将可见性/重点添加到边框以进行演示 - 使用1px和超时窗口更难看到。

Answer 4

也许只是在按钮上使用onclick？

然后，如果验证没问题，那么你可以在表格上以编程方式调用submit。

function validate() {
  var title = document.getElementById('title');
  if (!title.value) {
    title.classList.add('error');
    setTimeout(function() {
      title.classList.remove('error');
    }, 3000);
  } else {
     document.getElementById('form').submit()
  }
}

.error {
  border: 1px solid red;
}

<form id="form">
  <input type="text" id="title" required>
  <input type="submit" onclick="validate()">
</form>