如何使用 Bootstrap 验证器在 Bootstrap v4 上进行验证?
How to make validation work on Bootstrap v4 with Bootstrap validator?
我刚从 v3 迁移到 Bootstrap v4。 Bootstrap 验证器正在部分工作。 JavaScript 部分仍然有效。但是,样式消失了。
这是我使用的 bootstrap 验证器:https://github.com/1000hz/bootstrap-validator
外观如下:
看起来像这样:
我手动添加了 css,因此错误消息有效。
Bootstrap 验证器已经添加了 .has-danger class 。
出现错误时如何修复标签高亮和输入框高亮?
我已经根据 BS4 转换了所有 classes。这是我的代码:
$('#inputFirstName').attr('data-required-error', uiData.Error_FieldRequired_FirstName);
$('#inputLastName').attr('data-required-error', uiData.Error_FieldRequired_LastName);
$('#inputPhone').attr('data-required-error', uiData.Error_FieldRequired_Phone);
$('#inputEmail').attr('data-required-error', uiData.Error_FieldRequired_Email);
$('#inputTitle').attr('data-required-error', uiData.Error_FieldRequired_Title);
$('#inputPhone').attr('data-pattern-error', uiData.Error_InvalidPhone);
$('#inputEmail').attr('data-pattern-error', uiData.Error_InvalidEmail);
$('#inputEmail').attr('data-match-error', uiData.Error_InvalidEmail);
.help-block {
color: red;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form data-toggle="validator" role="form" id="userForm">
<div class="form-group">
<label for="inputFirstName" class="form-control-label">First name</label>
<input type="text" class="form-control" id="inputFirstName" value="" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputLastName" class="form-control-label">Last name</label>
<input type="text" class="form-control" id="inputLastName" value="" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputPhone" class="form-control-label">Phone number</label>
<input type="tel" class="form-control" id="inputPhone" pattern="\d{3}\.\d{3}\.\d{4}" value="" data-inputmask="'mask': '999.999.9999', 'showMaskOnFocus': 'false', 'showMaskOnHover': 'false'" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputEmail" class="form-control-label">Email address</label>
<input type="email" class="form-control" id="inputEmail" pattern="^[a-zA-Z0-9._+-]+@(" @ ")[a-zA-Z0-9.-]+\.[a-zA-Z]{2,9}$" value="" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputTitle" class="control-label">Position or title</label>
<input type="text" class="form-control" id="inputTitle" required>
<div class="help-block with-errors"></div>
</div>
</form>
提前致谢!
首先你的脚本文件顺序不对......jQuery
应该在最上面......你已经使用了bootstrap-validator
两次..不需要......
你的问题的答案是你必须使用 has-danger
class 来设置 label
的样式
.form-group.has-error.has-danger .form-control-label {
color: red;
}
.form-group.has-error.has-danger .form-control{
border: 1px solid red;
box-shadow: 0 0 0 0.2rem rgba(250, 16, 0, 0.18);
}
堆栈片段
$('#userForm').validator();
.help-block {
color: red;
}
.form-group.has-error.has-danger .form-control-label {
color: red;
}
.form-group.has-error.has-danger .form-control {
border: 1px solid red;
box-shadow: 0 0 0 0.2rem rgba(250, 16, 0, 0.18);
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form data-toggle="validator" role="form" id="userForm">
<div class="form-group">
<label for="inputFirstName" class="form-control-label">First name</label>
<input type="text" class="form-control" id="inputFirstName" value="" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputLastName" class="form-control-label">Last name</label>
<input type="text" class="form-control" id="inputLastName" value="" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputPhone" class="form-control-label">Phone number</label>
<input type="tel" class="form-control" id="inputPhone" pattern="\d{3}\.\d{3}\.\d{4}" value="" data-inputmask="'mask': '999.999.9999', 'showMaskOnFocus': 'false', 'showMaskOnHover': 'false'" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputEmail" class="form-control-label">Email address</label>
<input type="email" class="form-control" id="inputEmail" pattern="^[a-zA-Z0-9._+-]+@(" @ ")[a-zA-Z0-9.-]+\.[a-zA-Z]{2,9}$" value="" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputTitle" class="form-control-label">Position or title</label>
<input type="text" class="form-control" id="inputTitle" required>
<div class="help-block with-errors"></div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
我刚从 v3 迁移到 Bootstrap v4。 Bootstrap 验证器正在部分工作。 JavaScript 部分仍然有效。但是,样式消失了。
这是我使用的 bootstrap 验证器:https://github.com/1000hz/bootstrap-validator
外观如下:
看起来像这样:
我手动添加了 css,因此错误消息有效。
Bootstrap 验证器已经添加了 .has-danger class 。 出现错误时如何修复标签高亮和输入框高亮?
我已经根据 BS4 转换了所有 classes。这是我的代码:
$('#inputFirstName').attr('data-required-error', uiData.Error_FieldRequired_FirstName);
$('#inputLastName').attr('data-required-error', uiData.Error_FieldRequired_LastName);
$('#inputPhone').attr('data-required-error', uiData.Error_FieldRequired_Phone);
$('#inputEmail').attr('data-required-error', uiData.Error_FieldRequired_Email);
$('#inputTitle').attr('data-required-error', uiData.Error_FieldRequired_Title);
$('#inputPhone').attr('data-pattern-error', uiData.Error_InvalidPhone);
$('#inputEmail').attr('data-pattern-error', uiData.Error_InvalidEmail);
$('#inputEmail').attr('data-match-error', uiData.Error_InvalidEmail);
.help-block {
color: red;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form data-toggle="validator" role="form" id="userForm">
<div class="form-group">
<label for="inputFirstName" class="form-control-label">First name</label>
<input type="text" class="form-control" id="inputFirstName" value="" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputLastName" class="form-control-label">Last name</label>
<input type="text" class="form-control" id="inputLastName" value="" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputPhone" class="form-control-label">Phone number</label>
<input type="tel" class="form-control" id="inputPhone" pattern="\d{3}\.\d{3}\.\d{4}" value="" data-inputmask="'mask': '999.999.9999', 'showMaskOnFocus': 'false', 'showMaskOnHover': 'false'" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputEmail" class="form-control-label">Email address</label>
<input type="email" class="form-control" id="inputEmail" pattern="^[a-zA-Z0-9._+-]+@(" @ ")[a-zA-Z0-9.-]+\.[a-zA-Z]{2,9}$" value="" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputTitle" class="control-label">Position or title</label>
<input type="text" class="form-control" id="inputTitle" required>
<div class="help-block with-errors"></div>
</div>
</form>
提前致谢!
首先你的脚本文件顺序不对......jQuery
应该在最上面......你已经使用了bootstrap-validator
两次..不需要......
你的问题的答案是你必须使用 has-danger
class 来设置 label
.form-group.has-error.has-danger .form-control-label {
color: red;
}
.form-group.has-error.has-danger .form-control{
border: 1px solid red;
box-shadow: 0 0 0 0.2rem rgba(250, 16, 0, 0.18);
}
堆栈片段
$('#userForm').validator();
.help-block {
color: red;
}
.form-group.has-error.has-danger .form-control-label {
color: red;
}
.form-group.has-error.has-danger .form-control {
border: 1px solid red;
box-shadow: 0 0 0 0.2rem rgba(250, 16, 0, 0.18);
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form data-toggle="validator" role="form" id="userForm">
<div class="form-group">
<label for="inputFirstName" class="form-control-label">First name</label>
<input type="text" class="form-control" id="inputFirstName" value="" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputLastName" class="form-control-label">Last name</label>
<input type="text" class="form-control" id="inputLastName" value="" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputPhone" class="form-control-label">Phone number</label>
<input type="tel" class="form-control" id="inputPhone" pattern="\d{3}\.\d{3}\.\d{4}" value="" data-inputmask="'mask': '999.999.9999', 'showMaskOnFocus': 'false', 'showMaskOnHover': 'false'" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputEmail" class="form-control-label">Email address</label>
<input type="email" class="form-control" id="inputEmail" pattern="^[a-zA-Z0-9._+-]+@(" @ ")[a-zA-Z0-9.-]+\.[a-zA-Z]{2,9}$" value="" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputTitle" class="form-control-label">Position or title</label>
<input type="text" class="form-control" id="inputTitle" required>
<div class="help-block with-errors"></div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>