jQuery 验证错误放置和删除元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/931013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery validation errorPlacement and removing elements?
提问by Crazy Serb
Ok, I've tried a few things, but I'm stuck here...
好的，我已经尝试了一些东西，但我被困在这里......
Here's the HTML I'm working with:
这是我正在使用的 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>
and this is the code I've got in validate() function for this form:
这是我在这个表单的 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');
}
Now, that works just fine for a field like "email" in the above form (it inserts a paragraph and assigns it a class="error" along with adding "error" to the class in wrapping div)... but for the radio buttons it doesn't work the same way - it adds the "error" class to the surrounding label, and it doesn't even insert a paragraph with an error class. Why?
现在，这对于上面表单中的“email”这样的字段来说效果很好（它插入一个段落并为其分配一个 class="error" 以及在包装 div 中向类添加“error”）......但是对于单选按钮的工作方式不同——它将“错误”类添加到周围的标签中，甚至不插入带有错误类的段落。为什么？
What am I missing/doing wrong here?
我在这里错过了什么/做错了什么？
Also, how do I actually REMOVE the added paragraph in "success" portion? As it is right now, it just gets removed the "error" from its class attribute, and with every letter typed into the input field it adds another empty paragraph like this:
另外，我如何实际删除“成功”部分中添加的段落？就像现在一样，它只是从它的类属性中删除了“错误”，并且在输入字段中输入每个字母时，它会添加另一个像这样的空段落：
<p generated="true" class=""/>
So I end up with a bunch of those in every div for each field (depending on how many characters are typed in)... again, what am I missing?
所以我最终在每个字段的每个 div 中都有一堆那些（取决于输入的字符数）......再次，我错过了什么？
回答by Jeff Meatball Yang
It would help if you posted the full validate function and how it was wired up to your form.
如果您发布完整的验证功能以及它如何连接到您的表单，这将有所帮助。
Nevertheless, I think a couple things can be pointed out:
尽管如此，我认为可以指出几点：
Your radio buttons are wrapped inside their labels, while your email input is next to its label. Your code specifies:
您的单选按钮包含在其标签内，而您的电子邮件输入则位于其标签旁边。您的代码指定：
error.insertBefore(element.prev());
which means it will insert the error DIV before the <input> element's preceding neighbor. Your radio buttons have no preceding neighbor, it is alone inside the label element. You should change the code to:
这意味着它将在 <input> 元素的前一个邻居之前插入错误 DIV。您的单选按钮没有前面的邻居，它单独存在于 label 元素中。您应该将代码更改为：
error.prependTo(element.parents("div.required")).addClass("errorMsg");
Secondly, to remove the <P> tags when something successfully validates, you need to call the remove() function:
其次，要在成功验证时删除 <P> 标记，您需要调用 remove() 函数：
error.remove(); // assuming "error" is the <P> tag.
Hope this helps.
希望这可以帮助。
回答by jdigital
Have you tried debugging with FireBug? While you're using it, use the DOM inspector to make sure that the tree structure matches your expectations.
您是否尝试过使用FireBug 进行调试？在使用它时，请使用 DOM 检查器来确保树结构符合您的期望。
