jquery - jquery 验证器 - 自定义设计

Question

我有一组输入字段。如果其中任何一个不正确，我将在控件上方的气泡消息中显示它。我所做的是：

errorPlacement: function(error, element) {
        error.insertAfter(element)
        var message = error.html();
        error.html('<div class="innerError"><div class="message">' + message + '</div><div class="corner"></div></div>');
    }

现在，当字段无效时，消息按预期显示，但是当我将注意力移出字段时，没有更改它或者即使我确实更改了它，内部 div（消息）仍然存在......

先谢谢了！

Answer 1

一个简单的例子，验证一个文本框

<form action="/">
    <input type="text" /><span class="error"></span><br />
    <input type="submit" value="submit" />
</form>

$(function () {

    $('input:submit').click(function (e) {

        $('input:text').each(function () {
            if ($(this).val() == "") {
                e.preventDefault();
                $(this).parent().find('span').html("input text is blank");
            }
        });

    });

    $('input:text').blur(function () {
        if ($(this).val() != "") {
            $(this).parent().find('span').text("");
        }
    });

});

所以基本上你需要应用 .blur 事件（聚焦）并重新验证输入是否有效，然后删除错误消息，否则留下它。