0

需要从文本来自 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);
                }                
        });
4

1 回答 1

8

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

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

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/

于 2013-04-11T14:28:39.343 回答