jQuery validation errorPlacement and removing elements?

Question

Ok, I've tried a few things, but I'm stuck here...

Here's the HTML I'm working with:

<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:

    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?

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?

Answer 1

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.

Answer 2

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:

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:

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

Hope this helps.