jquery - 使用 css 将星号 * 添加到必填字段并在不需要时将其清除
问题描述
我有一个应用程序,其中包含数以百万计的字段,其中一些是“必需的”,而另一些则不是,并且使用 jQuery 执行它似乎是性能密集型的。因此,我尝试使用 css 进行操作,但无济于事。所以我在这里求助于 Stack Overflow!:)
让我放代码并尝试解释我想要实现的目标。这是来自 MVC 包装器的 Kendo UI,所以它有一些 Kendo 类,但它不应该改变任何东西。
这是第一次加载页面时包装代码的样子(在 Chrome 调试窗口中)。此时,即第一次加载页面时,我想在所有必填字段上向用户显示星号。
<div class="form-group">
<label><b>Phone</b></label>
<div>
<span class="k-widget phonenumber">
<input required="required" data-val="true" data-val-required="The Phone field is required." id="PhoneNumber" >
</div>
</div>
有一个如下定义的验证器,它动态地向表单元素添加/删除错误类。
var $validator = $("#form").validate({
highlight: function (element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
所以目前,当用户点击该字段并失去焦点时,代码如下所示:
<div class="form-group has-error">
<label><b>Phone</b></label>
<div>
<span class="k-widget phonenumber">
<input required="required" data-val="true" data-val-required="The Phone field is required." id="PhoneNumber" >
<span for="PhoneNumber" class="help-block">This field is required.</span>
</div>
</div>
因此 div 获取has-error
类并添加了一个 span 以显示错误消息。
当我们通过在此字段中键入内容来满足此要求时,错误消息被隐藏,错误类被删除并has-success
添加类,代码如下所示:
<div class="form-group has-success">
<label><b>Phone</b></label>
<div>
<span class="k-widget phonenumber">
<input required="required" data-val="true" data-val-required="The Phone field is required." id="PhoneNumber" >
<span for="PhoneNumber" class="help-block" style="display: none;">This field is required.</span>
</div>
</div>
所以看看这些元素的这种行为,有没有办法找到具有“必需”属性的元素,上一步找到它们的标签并在它们后面放一个 *。当表单没有错误类时,再次删除该 * ?我对找到那种 CSS 选择器一无所知!:(
我已经使用 jQuery 完成了它,它可以工作,但我仍然不喜欢它,因为表单是如此动态,并且AstAdd()
每当元素的required
属性发生变化时我都需要调用此方法。css 方式会更干净。
function AstAdd(){
$('input[required]').each(function () {
AstToggle($(this));
$(this).blur(function () {
AstToggle($(this));
});
});
}
function AstToggle(element) {
if (element.val() == '') {
element.closest(":has(label)").find('label').addClass('Asterisk');
} else {
element.closest(":has(label)").find('label').removeClass('Asterisk');
}
}
并创建一个这样的 css 类:
.Asterisk:after {
content: " *";
color: red;
}
非常感谢你的帮助!
解决方案
可以通过 CSS 使用 Psuedo Elements 和content
.
input[required] {
display: block;
}
input[required]::after {
content: '*';
color: red;
}
<label><b>Phone Number</b></label>
<div>
<span class="k-widget phonenumber">
<input required="required" data-val="true" data-val-required="The Phone field is required." id="PhoneNumber" >
</div>
</div>
<div class="form-group">
<label><b>Mobile Number</b></label>
<div>
<span class="k-widget phonenumber">
<input id="MobileNumber" >
</div>
</div>
<div class="form-group">
<label><b>Office number</b></label>
<div>
<span class="k-widget phonenumber">
<input id="OfficeNumber" >
</div>
</div>
看起来有这样的错误。查看更多:结合 CSS 属性和伪元素选择器?
我强烈建议使用 jQuery,因为它允许更多选择。
$(function() {
$("[required]").after($("<span>", {
class: "required"
}).html("*"));
});
.required {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label><b>Phone Number</b></label>
<div>
<span class="k-widget phonenumber">
<input required="required" data-val="true" data-val-required="The Phone field is required." id="PhoneNumber" >
</div>
</div>
<div class="form-group">
<label><b>Mobile Number</b></label>
<div>
<span class="k-widget phonenumber">
<input id="MobileNumber" >
</div>
</div>
<div class="form-group">
<label><b>Office number</b></label>
<div>
<span class="k-widget phonenumber">
<input id="OfficeNumber" >
</div>
</div>
希望有帮助。
推荐阅读
- selenium - 无法使用 selenium 从下拉列表中选择值
- reactjs - 如何将组件放置在 React Native Modal 之上?
- python - 为什么 + 运算符创建一个新列表但 += 不是
- java - 在 Firebase 数据库查询中重复出现的图像
- php - 如何修复 VS Code PHP IntelliSense HTML 格式?
- css - 边框不影响margin和padding怎么办?
- c# - 代码块期间分配的变量的 C# vs studio 未分配变量警告
- php - 未捕获的错误:调用 C:\xampp\htdocs\pro\ProController\DatabaseConfig.class.php:47 中整数的成员函数 fetch_assoc()
- android-studio - android studio action_set_alram logcat 错误
- ios - IOS 开发有和没有故事板