Question

我正在使用JQuery Validate插件，我对错误容器有一些问题。设置是：

<div class="form-row">
            <label class="span3">First name</label>
            <input data-ref-error="firstnameErrorLabel" class="span4" type="text" id="firstname" required/>
        </div>
        <div class="form-row-error" style="display:none;" id="firstnameErrorLabel">
            <div class="span4 text-error">Please enter a first name</div>
        </div>

$('#form').validate({
        errorPlacement: function (error, element) {
              error.appendTo($('#' + element.data('ref-error')));
              $('#' + element.data('ref-error')).show();
        },
        submitHandler: function (form) {
            form.submit();
        }
    });

现在的问题是，一旦发生错误，errorContainer将不会再次隐藏。一旦没有错误，我需要再次隐藏整个div。问题是我不能使用通用错误容器，因为插件在更大的代码库中使用，错误容器可能是跨度或在另一种情况下不同的东西（在这种情况下它是div）。

有人可以帮忙吗？

Answer 1

一个很大的问题是你的input元素不包含name属性。这是强制性，以使此插件正常运行。

<input name="firstname" data-ref-error="firstnameErrorLabel" class="span4" type="text" id="firstname" required/>

问题是我不能使用通用错误容器，因为插件在更大的代码库中使用，错误容器可能是跨度或在另一种情况下不同的东西（在这种情况下它是div）。

最好允许插件自动控制错误消息。该插件提供a toolbox full of options来实现任何所需的HTML结构。

只需使用div选项将错误容器更改为errorElement即可。然后修改errorPlacement，以便将消息放在您的其他div内，并应用所需的类。

$('#form').validate({
    errorElement: 'div',
    errorPlacement: function (error, element) {
        element.parent().next('div').html(error);
        error.addClass('span4 text-error');
    },
    messages: {
        firstname: {
            required: "Please enter a first name"
        }
    }
    ....

以下演示显示了动态创建所需结构的插件。根据需要调整......

DEMO：http://jsfiddle.net/2ckokp1L/

您的起始标记：

<div class="form-row-error" id="firstnameErrorLabel"></div>

由插件动态创建的DOM结构：

<div class="form-row-error" id="firstnameErrorLabel">
    <div id="firstname-error" class="error span4 text-error">Please enter a first name</div>
</div>

JQuery验证隐藏错误容器

1 个答案: