JQuery Validation对不同的输入元素使用不同的div来处理错误和多个错误类

Question

我正在我的表单上使用JQuery Validation，并且我试图让输入元素在输入无效时显示红色边框，并在相应的输入元素下显示错误消息。

我的HTML代码基本上是这样的：

<div id="formContainer">
<form id="mainForm" action="action.php" method="post">
    <input class="formTextBox" type="url" name="website" placeholder="website" required />
    <input class="formTextBox" type="email" name="email" placeholder="e-mail" required />
    <button type="submit" class="buttonForm" id="submitBtn"> <span id="buttonContent">Snapshot my site</span> </button>
</form>
</div>

我已经尝试在表单之后添加特定的DIV（仍然在#formContainer中），这将使用errorPlacement选项填充错误。在函数内部，我检查元素的name属性，并将错误附加到其对应的div ...但是当我继续键入或在输入之间单击时，错误消息不断重复和重复，并且没有错误被清除（我看到相同的错误信息很多次，一个在另一个之下。）

我已尝试将每个输入元素放在其自己的div中（具有固定宽度），并将errorElement设置为DIV，因此当JQuery Validation创建新div并将其附加到input元素旁边时，它会被推到下面......但是这会导致一些设计问题，我更喜欢2个错误容器在#formContainer div中（这样做似乎有点不可思议）。

另外，如果需要设置输入元素上的错误和错误消息DIV的样式，我该怎么办？

这里有一个我想到的例子：

谢谢！

Answer 1

尝试

<div id="formContainer">
    <form id="mainForm" action="action.php" method="post" novalidate>
        <div class="input-control">
            <input class="formTextBox" type="url" name="website" placeholder="website" required />
        </div>
        <div class="input-control">
            <input class="formTextBox" type="email" name="email" placeholder="e-mail" required />
        </div>
        <button type="submit" class="buttonForm" id="submitBtn"> <span id="buttonContent">Submit</span> 
        </button>
    </form>
</div>

然后

#formContainer {
    vertical-align: top;
}
.input-control {
    display: inline-block;
    vertical-align: top;
}
div.error {
    display: block;
    background-color: red;
    color: white;
}
input.error {
    border: 1px solid red;
}
.formTextBox {
    width: 210px;
    background-color: white;
    color: black;
}

和

jQuery(function ($) {
    var validator = $('#mainForm').validate({
        rules: {},
        messages: {},
        errorElement: "div"
    });
});

演示：Fiddle