Question

我正在尝试学习如何使用jQuery验证字段，并尝试为此创建简单的插件。

我有一个功能，我在输入的模糊事件上执行它。但每当我改变输入的焦点时，该函数会一次又一次地运行，每次都会收到一条新的错误消息。我希望通过每个输入只显示一条消息来实现它，并且无需多次更改焦点。

我尝试了“flags”变量方法，其中我有一个布尔变量，当我显示一条消息时，我改变了标志var值。但是当我走过输入时，模糊每次都从头开始运行，消息继续出现。这就是我所拥有的：

(function($) {

    $.fn.myforms = function() {


        if (this.length) {

            var messageErrorVisible = false;

            if (this.val() < 2 && messageErrorVisible === false) {

                this.addClass("myforms-text-field-error");

            this.after("<span class='myforms-error-message'>Please insert value for this field</span>");

            messageErrorVisible = true;

                return this;

//    JUST some experiments but I failed with them too...            
//                $(this).parent().siblings().removeClass('myforms-controll-error');
//                $(this).parent().addClass('myforms-controll-error');                

//                if ($(this).parent().hassClass('myforms-controll-error')) {
//                    $('.myforms-form-controll .error-message').remove();
//                }


            }
            else {

                if (this.hasClass("myforms-text-field-error")) {
                    this.removeClass("myforms-text-field-error");
                    $('.myforms-error-message').remove();
                }
                else {
                    return;
                }
            }

        }
        else {
            console.log("There is no selector in the Markup code");
            return false;
        }
    };


}(jQuery));






$(".myforms-form-controll .myforms-text-input").blur(function() {
    $(this).myforms();
});

如何只显示一次错误消息。我曾经（）方法也没有帮助我。以及如何仅针对已填充的字段删除错误消息？

非常感谢你！

编辑：

我为此代码创建了http://jsfiddle.net/65zPG/。

Answer 1

我已经用工作代码更新了小提琴。 http://jsfiddle.net/65zPG/2/

基本上我已经删除了你的布尔检查，因为逻辑错误，你每次都通过循环重置值。相反，我强制另一个检查是否存在错误类，如果是，我们不再添加错误消息。我也改变了测试来检查val（）的长度而不仅仅是存在，但是这可以改为你需要的验证。

更改代码的主要部分如下。

希望这可以达到您的意图，如果不是，您可能需要提供有关您希望代码执行的更多信息。

 if (this.val().length < 2) {
                if(!this.hasClass("myforms-text-field-error")){
                    this.addClass("myforms-text-field-error");
                    this.after("<span class='myforms-error-message'>Please insert value for this field</span>");
                }
                return this;
            }

“flags”变量不起作用，因为函数正在每个事件中执行

1 个答案: