我正在尝试设计第一个网站的样式。我正在使用Bootstrap 4和jquery验证插件,并且现在正在执行表单。我有两个问题:首先,我只想更改输入下方的错误消息的颜色,但是我的样式会更改输入文本的大小/颜色和错误消息的文本大小/颜色,我如何才能仅更改输入下方的错误文本?
第二个问题是,我是否在代码中更改Bootstrap表单控件的状态,取决于有效与否?
到目前为止,这是我的代码:
$('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="[email protected]"></div>
</div>
如果只想更改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="[email protected]">
</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>
关于引导程序使用,有一些类可以处理validaiton。尝试这样
<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>
您可以在整个页面中运行摘要并查看此答案
<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>