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

我希望在此活动中添加的内容是摆脱“必填字段”＆＃39;同时发送消息，将标签返回到原始文本。我不知道如何最好地解决这个问题，因为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

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

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

<强> 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 - 根据字段输入切换标签上显示的文本

2 个答案: