0

我正在尝试在具有“错误”类的 div 中显示一组单选按钮的错误消息。除了这组单选按钮之外，所有输入元素的错误消息都显示在正确的位置。

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'));
        }
    }
}

请指教，

4

1 回答 1

0

要输出.Errors元素中的错误，
我建议使用errorLabelContainer：

验证时隐藏并显示此容器。

示例：所有错误标签都显示在 ID 为“messageBox”的无序列表中，由作为 errorContainer 选项传递的选择器指定。所有错误元素都包含在 li 元素中，以创建消息列表。

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

这是一个演示：

$("#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>

编辑

使用您当前的方法，使用append()：

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

或者appendTo()：

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

或者要在另一个元素之后插入错误，请使用after()：

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

或者insertAfter()：

error.insertAfter($('#form'));
于 2019-04-18T08:47:21.733 回答