[英]How to change only error message color of input form-control
I am trying to style my first website.我正在尝试设计我的第一个网站。 I am using Bootstrap 4 and the jquery validation plugin and I am doing a form right now.我正在使用 Bootstrap 4 和 jquery 验证插件,我现在正在做一个表单。 I have two problems: First, I only want to change the color of the error message below my input, but my styling changes the input text size/color and the error message text size/color, how can I only change error text below an input?我有两个问题:首先,我只想更改输入下方错误消息的颜色,但是我的样式更改了输入文本大小/颜色和错误消息文本大小/颜色,如何仅更改下方的错误文本输入?
Second question is, where in my code do I change the Bootstrap form control state, depending on valid or not?第二个问题是,根据有效与否,我应该在代码中的何处更改 Bootstrap 表单控件状态?
This is my code so far:到目前为止,这是我的代码:
$('document').ready(function(){ $('#registration_form').validate({ rules: { username: { required: true, maxlength: 10, minlength: 3 }, email: { required: true, email: true }, email_con: { required: true, equalTo: "#email" }, password: { required: true, minlength: 7 }, password_con: { required: true, equalTo: "#password" }, formCheck: { required: true }, } }); });
.error{ color: red; font-Size: 13px; }
<div class="form-row form-group"> <div class="col-sm-4 col-xl-3 text-center d-xl-flex justify-content-xl-center align-items-xl-center label-column"><label class="col-form-label">Email* :</label></div> <div class="col-sm-6 input-column"><input class="form-control" type="email" name="email" id="email" placeholder="name@mail.com"></div> </div>
If you want to change color of error text message
only then write like label.error{color: red;}
and follow below html structure.如果您只想更改error text message
颜色,请编写如label.error{color: red;}
并遵循以下 html 结构。
$(document).ready(function(){ $('#registration_form').validate({ rules: { email: { required: true, email: true } } }); });
label.error{ color: red; font-size: 13px; }
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script> <div class="container my-2"> <div class="row"> <form class="col-sm-12" action="#" id="registration_form"> <div class="form-row form-group"> <div class="col-sm-4 text-sm-right"> <label class="col-form-label" for="email">Email* :</label> </div> <div class="col-sm-6"> <input class="form-control" type="email" name="email" id="email" placeholder="name@mail.com"> </div> </div> <div class="form-row form-group"> <div class="col-sm-6 offset-sm-4"> <button type="submit" class="btn btn-success">Submit</button> </div> </div> </form> </div> </div>
There are classes to deal with validaiton when it comes to bootstrap usage.在引导程序使用方面,有一些类可以处理验证。 Try like this像这样尝试
<div class="container">
<p class="h1">Register</p>
<form class="needs-validation" novalidate>
<div class="form-group">
<label for="email">E-mail</label>
<input type="email" class="form-control" id="email"
placeholder="E-mail" required>
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
The e-mail is required!
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password"
placeholder="Password" required minlength="6">
<div class="valid-feedback">
Great!
</div>
<div class="invalid-feedback">
The password must contain at least 6 characters!
</div>
</div>
<div class="form-group mt-3">
<button class="btn btn-primary" type="submit">Register!</button>
</div>
</form>
</div>
<script>
(function() {
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
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>
You can run a snippet in full page and check this answer您可以在整页中运行片段并检查此答案
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <p class="h1">Register</p> <form class="needs-validation" novalidate> <div class="form-group"> <label for="email">E-mail</label> <input type="email" class="form-control" id="email" placeholder="E-mail" required> <div class="valid-feedback"> Looks good! </div> <div class="invalid-feedback"> The e-mail is required! </div> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" id="password" placeholder="Password" required minlength="6"> <div class="valid-feedback"> Great! </div> <div class="invalid-feedback"> The password must contain at least 6 characters! </div> </div> <div class="form-group mt-3"> <button class="btn btn-primary" type="submit">Register!</button> </div> </form> </div> <script> (function() { window.addEventListener('load', function() { var forms = document.getElementsByClassName('needs-validation'); 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.