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

我有一个HTML试图使用jQuery验证的<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()的值已从其原始状态更改。这可以使用某种类型的切换功能来完成吗？

由于提前，马克

来源

2016-02-12 marcuthh

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

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

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

来源

2016-02-12 15:27:52

这太好了。非常优雅和清晰，感谢您花时间做到这一点。 – marcuthh

保存原文的一些属性的模糊：

$(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'));

来源

2016-02-12 15:15:05

这很好，谢谢你的帮助！ – marcuthh

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

回答

相关问题