使用Jquery Validate插件的自定义错误消息文本

Question

需要从文本来自CMS的范围中复制自定义错误消息文本.基本上需要显示自定义本地化错误消息.

提交表单时代码有效,但只要您单击外部,默认消息就会替换自定义消息.

http://jsfiddle.net/2nV5u/16/

HTML

<form name="form-core" id="form-core" method="post" action="" role="search"  novalidate="novalidate">
      <label for="keywords">Hello</label>
      <input type="text" id="keyword" name="keyword" class="required" />
      <span class="error-message-required">Ce champ est obligatoire</span>
      <input type="submit" /><input class="cancel" type="submit" value="Reset" />         
</form>

JS

 $('#form-core').validate({
            debug: false,
            onfocusout: function (element) { jQuery(element).valid() },
            errorElement: "div",
            errorPlacement: function (error, element) {
                jQuery('div[for=' + error.attr('for') + ']').remove();
                    error.text($(element).next('.error-message-required').text());
                    error.insertBefore(element);
                }                
        });

Answer 1

它没有按照您期望的方式工作,因为errorPlacement每次错误都不会触发回调函数.它仅在第一次出现错误时触发,然后插件自动显示/隐藏它自己创建的新错误元素.

1) 我认为你的事情比他们需要的更复杂.只需在.validate()初始化函数中指定自定义错误消息即可.<span></span>从HTML/CMS中删除,让插件按照设计的方式处理.

messages: {
    keyword: {
        required: "Ce champ est obligatoire"
    }
}

2) 再次,让插件完成它的工作.将您的errorPlacement回调函数更改为:

errorPlacement: function (error, element) {
    error.insertBefore(element);
}

3) 将您的重置按钮更改为type="reset",以便它不提交表单:

<input class="cancel" type="reset" value="Reset" />

工作演示:http: //jsfiddle.net/wQaYw/

jQuery:

$(document).ready(function () {

    $('#form-core').validate({
        messages: {
            keyword: {
                required: "Ce champ est obligatoire"
            }
        },
        onfocusout: function (element) {
            jQuery(element).valid()
        },
        errorElement: "div",
        errorPlacement: function (error, element) {
            error.insertBefore(element);
        }
    });

});

编辑:

无论出于何种原因,如果您无法span从CMS中删除并声明其中的自定义消息.validate(),您还有另一种选择.

使用内置rules('add')方法input[type="text"]通过required规则在整个表单上动态更改每个的默认消息,如下所示.(但是,使用此方法,您必须为每个元素提供自定义消息,因为这将覆盖所有元素.)

$('#form-core input[type="text"]').each(function () {
    $(this).rules('add', {
        messages: {
            required: $(this).next('.error-message-required').text()
        }
    });
});

在这之后...

$('#form-core').validate({
    onfocusout: function (element) {
        jQuery(element).valid()
    },
    errorElement: "div",
    errorPlacement: function (error, element) {
        error.insertBefore(element);
    }
});

工作演示:http://jsfiddle.net/6Vzdz/