使用CSS将星号*添加到必填字段，并在不需要时清除它 [英] Use css to add asterisk * to required fields and clear it when not needed

问题描述

我有一个应用程序，其中包含数不胜数的字段，其中有些是必需"的，而有些则不是，而使用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完成了它，但是它可以工作，但是我仍然不喜欢它，因为表单是如此动态，每当元素的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;
}

非常感谢您的帮助！

解决方案

可以使用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> 

希望有帮助.

I have an app that has gazillions of fields where some are are 'required' and some aren't and doing it using jQuery seems performance intensive. So I tried doing it using css but to no avail. So I have turned here to Stack Overflow! :)

Let me put the code and try to explain what I want to achieve.This is from a Kendo UI for MVC wrapper, so it has some Kendo classes but it shouldn't change anything.

This is what the wrapper code looks like when the page is first loaded (in the Chrome debug window). At this point, i.e. when the page is first loaded, I want to show the user the asterisk on all the required fields.

<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>

There's a validator defined as follows which dynamically adds/ removes error classes to the form elements.

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);
        }
    }
});

So currently, when the user clicks on this field and loses focus, the code looks like this:

<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>

So the div gets has-error class and a span is added to show the error message.

When we fulfil this requirement by typing something in this field, the error message is hidden and the error class is removed and has-success class added and the code looks like this:

<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>

So looking at this behavior of these elements, is there a way to find elements that have the 'required' attribute, go one step up to find their label and put a * after them. And when the form has no error class, removing that * again? I'm clueless to finding that kind of css selector! :(

I have done it using jQuery, it works, but I still don't like it as the form is so dynamic and I need to call this AstAdd() method whenever the elements' required attribute change. css way would have been way cleaner.

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');
    }
}

And create a css class like this:

.Asterisk:after {
    content: " *";
    color: red;
}

Thank You very much for the help!

解决方案

Can sort of do this with CSS using Psuedo Elements and 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>

It looks like there is a bug of sorts for this. See more: Combine CSS Attribute and Pseudo-Element Selectors?

I would strongly advise using jQuery as it it allows a lot more options.

$(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>

Hope that helps.

这篇关于使用CSS将星号*添加到必填字段，并在不需要时清除它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！