Jquery 验证 - errorPlacement 只在第一次工作答案

【问题标题】：Jquery validation - errorPlacement only works first timeJquery 验证 - errorPlacement 只在第一次工作
【发布时间】：2013-11-20 12:49:18
【问题描述】：

这是我的代码

http://jqueryvalidation.org/documentation/

var validator = $("#loginForm").validate({
    errorPlacement: function (error, element) {
        error.html("");
        var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
        img.attr('src', "../images/inputerror.png");
        img.appendTo(error);
        error.insertAfter(element);
    }
});

这会设置一个图像而不是“此字段是必需的”。

一切正常……但只是第一次。当我再次验证它时，它显示“此字段再次必填”。

第一次

第二次

【问题讨论】：

请尽可能提供小提琴。
如果您将其绑定到pageinit，请改用pageshow 或pagebeforeshow。 pageinit 只触发一次。编辑/提示：使用 unqiue id 作为元素。
@Omar 我每次点击登录按钮时都绑定验证器。
@KenVernaillen 你会做小提琴吗？
您需要在message 选项中定义覆盖错误消息。这就是为什么它第一次起作用，然后默认消息会覆盖自定义消息。

标签： jquery jquery-mobile jquery-validate

【解决方案1】：

您必须使用正确的回调函数来获得预期的行为。通常，errorPlacement 仅用于自定义布局...例如，如果您希望所有消息都位于输入下方或工具提示内部。

对于错误切换类，或在这种情况下切换图像，您将使用highlight 和unhighlight 回调函数。见：http://jqueryvalidation.org/validate/

但是，您使用 HTML 代替消息是可以接受的解决方法。请记住 DOM 结构...默认情况下，您的自定义 HTML 将包含在 <label> 元素中，除非您使用 errorElement 选项指定不同类型的元素。

带有默认选项的 DOM 结构：

<label class="error"><img src="inputerror.png" /></label>

使用errorElement: 'span' 选项...

var validator = $("#loginForm").validate({
    // your options and rules,
    errorElement: 'span'
});

生成的 DOM 结构：

<span class="error"><img src="inputerror.png" /></span>

【讨论】：

【解决方案2】：

   jQuery.extend(jQuery.validator.messages, {
            required: "<img src='../images/inputerror.png'/>"
    });

这样做了。感谢@Omar！

【讨论】：

【解决方案3】：

为什么不直接使用 showError 函数而不是 errorReplacement 呢？

看看这个例子：

var validator = $("#loginForm").validate({
    errorClass: "error", 
    errorElement: 'span',
    highlight: function (element, errorClass, validClass) { 
        $(element).parents("div.control-group").addClass(errorClass);
    },
    unhighlight: function (element, errorClass, validClass) { 
        $(element).parents(".error").removeClass(errorClass);
    }, 
    showErrors: function(map, list) {
        this.defaultShowErrors();           // calls the default function
                                            // after which we can add our changes
        $('span.error').each(function(index) {
            $(this).html('');
            var img = $('<img id="dynamic">');
            img.attr('src', "../images/inputerror.png");
            $(this).append(img);            
        });
    }
});

【讨论】：