Question

我有一个应用程序，其中包含成千上万个字段，其中有些是“必需的”，而有些则不是，而使用jQuery进行处理似乎会占用大量性能。因此，我尝试使用CSS来执行此操作，但无济于事。因此，我已经转向堆栈溢出！：）

让我放下代码并尝试解释我要实现的目标。这是来自Kendo UI for MVC包装程序的，因此它具有一些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类，并添加了一个范围以显示错误消息。

当我们通过在此字段中键入某些内容满足此要求时，错误消息将被隐藏，错误类将被删除，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>

因此，查看这些元素的这种行为，是否有办法找到具有'required'属性的元素，向上查找其标签，并在其后加上*。并且当表单没有错误类别时，再次删除该*吗？我不知道要找到那种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;
}

非常感谢您的帮助！

Answer 1

可以使用Psuedo Elements和content在CSS上做到这一点。

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>

这似乎有一个错误。查看更多：Combine CSS Attribute and Pseudo-Element Selectors?

我强烈建议使用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>

希望有帮助。

使用CSS将星号*添加到必填字段，并在不需要时将其清除

1 个答案: