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

我想添加到此事件中的是同时删除 'required field' 消息，将标签返回到其原始文本。我不知道如何最好地解决这个问题，因为添加警告时 label.html() 值已从其原始状态更改。这可以使用某种切换功能来完成吗？

提前致谢，马克

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

Answer 2

有几种方法可以解决这个问题。你可以使用数据属性来切换文本，所以我想给你另一个解决方案。

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

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

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

jQuery - toggle text displayed on label, depending on field input

html

toggle