Используйте css, чтобы добавить звездочку * в обязательные поля и очистить ее, когда она не нужна

Question

У меня есть приложение, в котором есть миллионы полей, некоторые из которых являются «обязательными», а некоторые нет, и выполнение этого с помощью jQuery, по-видимому, требует высокой производительности.Поэтому я попытался сделать это с помощью CSS, но безрезультатно.Итак, я обратился к Stack Overflow!:)

Позвольте мне написать код и попытаться объяснить, чего я хочу достичь. Это из пользовательского интерфейса Kendo для оболочки 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 class идля отображения сообщения об ошибке добавлен диапазон.

Когда мы выполняем это требование, набирая что-то в этом поле, сообщение об ошибке скрывается и класс ошибки удаляется, а класс has-success добавляется и код выглядит следующим образом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>

Итак, если посмотреть на это поведение этих элементов, есть ли способ найти элементы с атрибутом '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

Можно сделать это с помощью 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>

Надеюсь, это поможет.