jQuery-переключение текста, отображаемого на метке, в зависимости от ввода поля

У меня есть HTML <form>, который я пытаюсь проверить с помощью jQuery. До сих пор у меня было так, что если нужное поле оставлено пустым, к соответствующей метке поля добавляется некоторый текст, информирующий пользователя. Это делается так: 

    $(requiredInputs).on('blur', function(){
        //isolate name attribute of field left
        var fieldname = $(this).attr('name');
        //use name value to find associated label to field
        var label = $("#registration label[for='"+fieldname+"']");
        //sanitize and store current input value in variable
        var inputValue = $.trim($(this).val());
        if (inputValue.length === 0){
            //new div to be appended to the label
            var alert = '<p><small>This is a required field!</small></p>';
            //change HTML to inform user
            $(label).html(label.html() + alert);
            //emphasise input box
            $(this).css('border', '2px solid red');
        }
    });

У меня также есть событие, которое удаляет красную границу, как только вводится некоторый текст: 

    //turn field back to normal on text entry
    $(requiredInputs).on('input', function(){
        //de-emphasise input box
        $(this).css('border', 'none');
    });

Что я хочу добавить в это событие, так это одновременно избавиться от сообщения "Обязательное поле", вернув метку к исходному тексту. Я не знайте, как лучше всего это сделать, так как значение label.html() было изменено из своего первоначального состояния при добавлении предупреждения. Можно ли это сделать с помощью какой-то функции переключения?

Заранее спасибо, Марк

2 2
html jquery toggle

2 ответа:

Есть несколько способов решить эту проблему. Вы можете использовать атрибуты данных для переключения текста, как уже упоминалось, поэтому я хочу предложить вам другое решение.

Вместо изменения метки Вы можете дать ему класс, который использует псевдо-элемент. Следовательно, вы просто должны удалить класс позже.

Jsfiddle

HTML 

<form>
  <label for="foo" class="required">foo</label>
  <input type="text" id="foo">
</form>

JQuery 

$('#foo').on('blur', function(){
    var inputValue = $.trim($(this).val());
    if (inputValue.length == 0){
        $('label').addClass('required');
    }
});

$('#foo').on('input', function(){
    var inputValue = $.trim($(this).val());
    if (inputValue.length > 0){
        $('label').removeClass('required');
    }
});

CSS 

label.required::after { 
    content: " - required";
}
1

Сохранение исходного текста в некотором атрибуте при размытии: 

 $(label).attr('data-original', label.html());
 $(label).html(label.html() + alert);

Затем восстановите его на входе: 

var fieldname = $(this).attr('name');
var label = $("#registration label[for='"+fieldname+"']");     
$(label).html($(label).attr('data-original'));
1