Question

我正在处理表单，并且我已添加了我自己的错误消息，我只想在用户输入错误文本时显示。

HTML如下：

<div class="form-group">
    <div class="col-md-6">
        <label class="control-label">First Name</label><span class="form-warning">(First Name can only contain letters)</span>
        <div>
            <span class="first-name">
                <input type="text" name="first-name" value="" size="40" maxlength="80" minlength="2">
            </span>
            <i class="fa fa-times hide"></i><i class="fa fa-check hide"></i>
        </div>
    </div>
    <div class="col-md-6">
        <label class="control-label">Last Name</label><span class="form-warning">(Last Name can only contain letters)</span>
        <div>
            <span class="last-name">
                <input type="text" name="last-name" value="" size="40" maxlength="80" minlength="2">
            </span>
            <i class="fa fa-times hide"></i><i class="fa fa-check hide"></i>
        </div>
    </div>
</div>

两个字段仅允许输入字母。这一切都在客户端使用regex进行检查。我也得到了一些服务器端验证，但这是一个单独的问题。

无论如何，检查输入的代码如下：

function name(e) { //First and Last Name
        var n = new RegExp(/^[A-Za-z -]+$/);
        return n.test(e);
    }
function invalid(input) {
        input.css({"background": "rgb(237, 209, 209)", "color": "red", "border": "1px solid red"});
        input.parents().find('.form-warning').removeClass('hide'); //Show Warning
        input.parent().nextAll(".fa-times").removeClass('hide');
        input.parent().nextAll(".fa-check").addClass('hide');
    }
    //Valid input show fa-check and highlight green
    function valid(input) {
        input.css({"background": "rgb(209, 237, 209)", "color": "green", "border": "1px solid green"});
        input.parents.find('.form-warning').addClass('hide'); //Hide Warning
        input.parent().nextAll(".fa-times").addClass('hide');
        input.parent().nextAll(".fa-check").removeClass('hide');
    }
function validate(input, type) {
        if (input.val() === "") {
            reset(input);
        }
        else {
            if (!type(input.val())) {
                invalid(input);
            } else {
                valid(input);
            }
        }
    }
//First Name
    $("input[name='first-name']").keyup(function () {
        validate($(this), name);
    });
    //Last Name
    $("input[name='last-name']").keyup(function () {
        validate($(this), name);
    });

我遇到的问题是这一行：

    input.parents.find('.form-warning').addClass('hide'); //Hide Warning

和这一行：

    input.parents().find('.form-warning').removeClass('hide'); //Show Warning

当第一个名称无效/有效且姓氏无效/有效时，正在两个字段上应用。理想情况下，我希望能够找到与所讨论的输入最接近的form-warning，并且只显示/隐藏它。

有没有人有任何建议？

Answer 1

怎么样：

input.closest('.col-md-6').find('.form-warning:first').removeClass('hide');

你似乎在你的dom中过多，所以通过.closest()限制它，这基本上是.parents('<sel>:first')

Answer 2

请尝试以下代码，这可能对您有所帮助

input.parent（）找到（ '形式警告。 '）removeClass（' 隐藏'）;

尝试定位父元素子JQuery

2 个答案: