jQuery验证错误放置和删除元素？

Question

好的，我已经尝试了一些东西，但我被困在这里......

这是我正在使用的 HTML：

<div class="required">
<label for="paysys_idworldpay" class="labelRadio">
<input type="radio" value="worldpay" name="paysys_id" id="paysys_idworldpay" class="inputRadio"/>
<b>WorldPay</b></label>
<label for="paysys_idoffline" class="labelRadio">
<input type="radio" value="offline" name="paysys_id" id="paysys_idoffline" class="inputRadio"/>
<b>Paypal</b></label></div>

<div class="required">
<label for="email">Email Address</label>
<input type="text" value="" name="email" class="required email inputText" id="email" /></div>

这是我在此表单的 validate() 函数中获得的代码：

    errorElement: 'p',
errorClass: 'error',
errorPlacement: function(error, element) {
    error.insertBefore(element.prev());
    element.parent().addClass('error');
},
success: function(label){
    label.removeClass('error');
    label.parent().removeClass('error');
}

现在，这对于上述表单中的“email”之类的字段非常有效（它插入一个段落并为其分配一个 class="error" 并在包装 div 的类中添加“error”）...但是对于单选按钮，它的工作方式不同——它将“错误”类添加到周围的标签中，它甚至不插入带有错误类的段落。为什么？

我在这里遗漏了什么/做错了什么？

另外，我如何实际删除“成功”部分中添加的段落？就像现在一样，它只是从其类属性中删除了“错误”，并且在输入字段中输入的每个字母都会添加另一个空段落，如下所示：

<p generated="true" class=""/>

所以我最终在每个字段的每个 div 中都有一堆那些（取决于输入了多少个字符）......再次，我错过了什么？

Answer 1

如果您发布完整的验证功能以及它是如何连接到您的表单的，将会有所帮助。

不过，我认为有几点可以指出：

您的单选按钮被包裹在其标签内，而您的电子邮件输入则位于其标签旁边。您的代码指定：

 error.insertBefore(element.prev());

这意味着它将在 元素的前一个邻居之前插入错误 DIV。您的单选按钮没有前面的邻居，它在标签元素中是单独的。您应该将代码更改为：

error.prependTo(element.parents("div.required")).addClass("errorMsg");

其次，要在成功验证时删除

标签，您需要调用 remove() 函数：

error.remove(); // assuming "error" is the <P> tag.

希望这会有所帮助。

Answer 2

您是否尝试过使用FireBug 进行调试？在您使用它时，请使用 DOM 检查器来确保树结构符合您的期望。