errorPlacement for Radio button with ul and li for jquery validation plugin

Question

I am trying to display the error message for a group of radio buttons in a div with class "Errors". All input element's error messages display on the correct place except for this group of radio buttons.

HTML:

<ul>
    <li><input type="radio"  value="organic1" name="payment" />Organic1</li>
    <li><input type="radio"  value="organic2" name="payment" />Organic2</li>
    <li><input type="radio"  value="organic3" name="payment" />Organic3</li>
    <li><input type="radio"  value="organic4" name="payment" />Organic4</li>
    <li><input type="radio"  value="organic5" name="payment" />Organic5</li>
    <li><input type="radio"  value="organic6" name="payment" />Organic6</li>
</ul>
<br style="clear:both;">
<div class="Errors"></div>

JS:

$("#form").validate({
    errorPlacement: function(error, element) {  
        if (element.is(":radio")) {
            error.insertAfter(element.closest('ul.radio'));
            error.addClass('.Errors');

            // Also, I have tried all this but no use
            //error.appendTo(element.closest('ul.radio').find('div.Errors'));
            //$(element).closest('li').next().find('div.Errors').html(error);
            //error.appendTo(element.parent().find('div.Errors'));
        }
    }
}

Please Advice,

Answer 1

To output the error in the .Errors element,
I recommend using errorLabelContainer:

Hide and show this container when validating.

Example: All error labels are displayed inside an unordered list with the ID "messageBox", as specified by the selector passed as errorContainer option. All error elements are wrapped inside a li element, to create a list of messages.

$("#myform").validate({
  errorLabelContainer: "#messageBox",
  wrapper: "li",
  submitHandler: function() { alert("Submitted!") }
});

Here's a demonstration:

$("#form").validate({
  messages: {
    stuff: {
      required: "Please enter some stuff."
    },
    payment: {
      required: "Please select a payment."
    }
  },
  rules: {
    payment: "required",
    stuff: "required"
  },
  errorContainer: ".Errors",
  errorLabelContainer: ".Errors ul",
  wrapper: "li"
});

#errors {
  margin: 1em 0 0;
}

label.error {
  display: block;
  color: red;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>

<form id="form">
  <ul>
    <li><input type="text" name="stuff"></li>
    <li><input type="radio" value="organic1" name="payment" />Organic1</li>
    <li><input type="radio" value="organic2" name="payment" />Organic2</li>
    <li><input type="radio" value="organic3" name="payment" />Organic3</li>
  </ul>
  <input type="submit">
</form>

<div class="Errors">
  <ul></ul>
</div>

---

EDIT

With your current method, use append():

$('.Errors').append(error);

Or appendTo():

error.appendTo($('.Errors'));

Or to insert errors after another element, use after():

$('#form').after(error);

Or insertAfter():

error.insertAfter($('#form'));