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

Posted 2023-05-07

【中文标题】使用 css 将星号 * 添加到必填字段并在不需要时将其清除

【英文标题】：Use css to add asterisk * to required fields and clear it when not needed

【发布时间】：2019-10-28 10:27:19

【问题描述】：

我有一个应用程序，其中包含数以百万计的字段，其中一些是“必需的”，而另一些则不是，并且使用 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 完成了它，它可以工作，但我仍然不喜欢它，因为表单是如此动态，每当元素的 required 属性发生变化时，我都需要调用此 AstAdd() 方法。 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;

非常感谢您的帮助！

【问题讨论】：

你看过这个吗？ paulund.co.uk/add-required-asterisk-with-css

嗨@Waldir，谢谢你的链接，但这对我不起作用，因为我的 元素没有“必需”类，并且这些字段上的必需属性是动态操作的不同的情况。

那么您究竟是如何添加和删除类的呢？当然它使用 jQuery，如果是这样，您也可以使用它来添加所需的类。

嗨@Waldir Bolanos，这种添加/删除类的行为是由 ASP.NET MVC 包装器的 Kendo UI 的内部工作完成的。当然它是由我无法控制的包装器内的 jQuery 完成的，但我现在不想向它添加更多的 jQuery。谢谢。

如果所有字段都需要，这可以使用我展示的相同方法来完成，但如果有些是，有些不是，这对于纯 CSS 是不可能的，因为它不能倒退。跨度>

【参考方案1】：

可以通过 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>

这似乎有一个错误。查看更多：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>

希望对您有所帮助。

【讨论】：

嗨@Twisty，非常感谢您的回答。我刚刚更新了我的问题，使其更加清晰，我在 jQuery 代码中所做的就是我想要实现的，但我想使用 css 来实现。基本上，找到具有“必需”属性的元素，再上一步找到它们的标签并在它们后面加上 *。当表单没有错误类时，再次删除该 *。感谢您的帮助！

@AshK CSS 中没有父选择器，甚至在 CSS3 中也没有。单独使用 CSS 是不可能的。