目前，如果输入字段带有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>
你可以这样实现：
$("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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
