Question

我正在使用jQuery validator plugin上的this signup form。

我遇到的问题是，如果我将焦点从输入框中移出并且包含错误（无效的电子邮件或空框），然后我继续正确填写表单，无论上一个错误是什么不会消失。

所以，例如，如果我错过了＆＃39; @＆＃39;填写我的电子邮件地址并获取＆＃34;请输入有效的电子邮件地址。＆＃34;错误，这个错误仍然存在，即使我把'＆＃39; @＆＃39;英寸

这是我用来初始化的代码：

$(document).ready(function()
{
    $('#form').validate(
    {
        rules:
        {
            email:
            {
                required: true,
                email: true
            }
        },
        errorPlacement: function(error, element)
        {
            $('#hidden').html(error);
        }
    });
});

以下是我的表格：

<form id="form" role="form" class="form-inline" method="POST">
    <p id="p">Get notified when Shopaholic launches</p>
    <input type="email" name="email" class="form-control input-lg" id="inputEmail" placeholder="Enter email">
    <button type="submit" class="btn btn-primary btn-lg" data-dismiss="modal">Notify me</button>
</form>
<div type="hidden" id="hidden" class="p"></div>

更新

按照Sparky的回答，有效的代码是：

$(document).ready(function()
{
    $('#form').validate(
    {
        rules:
        {
            email:
            {
                required: true,
                email: true
            }
        },
        errorLabelContainer: "#hidden",
        errorPlacement: function(error, element)
        {
            error.insertAfter(element);
        }
    });
});

Answer 1

这打破了插件...

errorPlacement: function(error, element) {
    $('#hidden').html(error);
}

error是一个对象，而不是HTML，element是触发错误的输入对象。

默认功能是：error.insertAfter(element)

无论自定义函数是什么，您都应该使用error和element对象作为插件自动切换其error对象的可见性。

如果您不想要label内的消息，或者您希望将所有消息放在另一个容器中，还可以使用其他选项。

请在此处查看所有选项：http://jqueryvalidation.org/validate/

Answer 2

请改用：

$(document).ready(function()
 {
    $('#form').validate(
    {
      rules:
      {
        email:
        {
            required: true,
            email: true
        }
    },
    messages: {
        email: "Please enter a valid email address."
    }
    });
});

FIDDLE

jQuery验证器在修复后仍会标记错误

2 个答案: