jQuery - 根据字段输入切换标签上显示的文本

Question

我有一个 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()添加警告时值已从其原始状态更改。这可以使用某种切换功能来完成吗？

提前致谢，标记

Answer 1

有几种方法可以解决这个问题。如上所述，您可以使用数据属性来切换文本，因此我想为您提供另一种解决方案。

您可以给它一个使用伪元素的类，而不是更改标签。因此，您只需稍后删除该类即可。

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