第一次使用引导程序，第一次问一个关于stackoverflow的问题！我正在使用电子邮件，主题和消息的表单创建该模型。我还使用引导程序验证程序来获取错误消息，例如“”。但它们一直显示在窗口的左侧。有人知道在输入框下方获取内容的方法吗？甚至在输入框上方？就像在哪里显示“电子邮件”一样，我希望在其旁边弹出错误消息“请输入有效的电子邮件”。我已经包含了html和CSS。希望我做对了。谢谢！
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="form-issue.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.rawgit.com/PascaleBeier/bootstrap-validate/v2.2.0/dist/bootstrap-validate.js"></script>
</head>
<body>
<div class="contact">
<h2>CONTACT</h2>
<form action="" method="POST">
<div class="form-group">
<label class="label" for="email">Email</label>
<input id="email" class="form-control" type="text" name="email">
</div>
<div class="form-group">
<label class="label" for="subject"> Subject </label>
<input id="subject" class="form-control" type="text" name="subject">
</div>
<div class="form-group">
<label class="label" for="message">Message</label>
<textarea id="message" class="form-control" name="message" rows="10"></textarea>
<input class="button" type="submit" value="Submit">
</div>
</form>
</div>
<script>
bootstrapValidate('#email', 'email:Please enter a valid email');
bootstrapValidate('#subject', 'required:Subject is required');
bootstrapValidate('#message', 'required:Message is required');
</script>
</body>
</html>
.contact {
color: white;
background-color: #c0c0c0;
padding-top: 2%;
padding-bottom: 4%;
width: 100%;
}
.contact h2 {
text-align: center;
}
.form-group {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin: 25px;
}
#email,
#subject,
#message {
width: 30%;
}
.label {
width: 30%;
text-align: left;
}
.button {
background-color: #000000;
color: white;
text-align: center;
width: fit-content;
min-height: inherit;
border-color: #000000;
border-width: 10px;
margin-top: 20px;
margin-bottom: 5px;
}
请参见下面的示例进行验证！并添加一种线条样式：.invalid-feedback {width：30％; }
Please see below example for validation! And add one line style: .invalid-feedback{ width:30%; }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.rawgit.com/PascaleBeier/bootstrap-validate/v2.2.0/dist/bootstrap-validate.js"></script>
<script type="text/javascript">
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</head>
<body>
<div class="contact">
<h2>CONTACT</h2>
<form action="" method="POST" class="needs-validation" novalidate>
<div class="form-group">
<label class="label" for="email">Email</label>
<input id="email" class="form-control" type="text" name="email" required="">
<div class="invalid-feedback"> Please enter valid email.</div>
</div>
<div class="form-group">
<input class="button" type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>在元素的类属性中使用Bootstrap类“文本中心”。