Question

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

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

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回调函数不会在每个错误上触发。它仅在第一次出现错误时触发，然后插件自动显示/隐藏 it 自己创建的新错误元素。

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);
        }
    });

});

修改：

如果出于某种原因，您无法从CMS中删除span并在.validate()内声明自定义消息，则可以选择另一种方式。

使用built-in rules('add') method在整个表单上动态更改每个input[type="text"]的{{1}}规则的默认消息，如下所示。（但是，使用此方法，您必须为每个元素提供自定义消息，因为这将覆盖所有这些元素。）

required

之后...

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

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

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

1 个答案: