Javascript 引导表单验证在不需要输入时以绿色突出显示标签文本?
我有一个奇怪的事情发生在我的两个单选按钮上,当表单被验证时,它们的标签的前景被更改为绿色。如果表单无效,则标签不会变为红色。无论哪种方式,它们都应该保持其黑色前景,因为单选按钮输入不像我的其他表单元素那样具有与它们关联的Javascript 引导表单验证在不需要输入时以绿色突出显示标签文本?,javascript,html,twitter-bootstrap,validation,bootstrap-4,Javascript,Html,Twitter Bootstrap,Validation,Bootstrap 4,我有一个奇怪的事情发生在我的两个单选按钮上,当表单被验证时,它们的标签的前景被更改为绿色。如果表单无效,则标签不会变为红色。无论哪种方式,它们都应该保持其黑色前景,因为单选按钮输入不像我的其他表单元素那样具有与它们关联的required属性。为什么它们会变成绿色?我如何防止这两个实体上发生这种情况或停止表单验证 index.html <form id="signup-form" novalidate> <div class="form-group"> <h1&
required
属性。为什么它们会变成绿色?我如何防止这两个实体上发生这种情况或停止表单验证
index.html
<form id="signup-form" novalidate>
<div class="form-group">
<h1>Sign Up</h1>
<p>Use this form to enter your name and email to sign up.</p>
</div>
<!-- Name -->
<div class="form-group">
<div class="row">
<div class="col">
<label for="firstNameInput">Name</label>
<input type="text" class="form-control" id="firstNameInput" placeholder="First name" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col">
<label for="lastNameInput">Last</label>
<input type="text" class="form-control" id="lastNameInput" placeholder="Last name" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
</div>
<!-- Email -->
<div class="form-group">
<label for="emailAddressInput">Email address</label>
<input type="email" class="form-control" id="emailAddressInput" aria-describedby="emailHelp" placeholder="name@example.com" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
<div class="invalid-feedback">
Please provide a valid email.
</div>
</div>
<!-- Options -->
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="radio" name="Radios" id="type1RadioButton" value="option1" checked>
<label class="form-check-label" for="type1RadioButton">
Type 1 user
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="Radios" id="type2RadioButton" value="option2">
<label class="form-check-label" for="type2RadioButton">
Type 2 user
</label>
</div>
</div>
<!-- Submit Button -->
<div class="form-group">
<a href="#" class="btn btn-primary" id="submitButton" type="submit">Submit</a>
</div>
</form>
结果
在表单验证之前
表单验证后
使用HTML5验证表单时,所有表单输入都会应用
:valid
状态(或:invalid
,验证失败)。我不知道有什么方法可以防止:valid状态应用于特定的输入
一旦:valid
应用于输入,引导程序就会有这个CSS,它会使标签变成绿色
.was-validated .form-check-input:valid~.form-check-label {
color: #28a745;
}
要覆盖引导应用的绿色样式,请使用标签上的text dark
类。这样,标签将始终为黑色,而不是绿色(:有效)或红色(:无效)
类型2用户
.was-validated .form-check-input:valid~.form-check-label {
color: #28a745;
}
<div class="form-check">
<input class="form-check-input" type="radio" name="Radios" id="type2RadioButton" value="option2">
<label class="form-check-label text-dark" for="type2RadioButton">
Type 2 user
</label>
</div>