如何在输入字段中添加红色边框和必填属性？

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

使用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 2

 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 3

您可以这样实现：

 $("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 4

也许只是使用onclick按钮？

然后，如果可以通过验证，则可以以编程方式调用submit上的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>