如何使用jquery验证插件显示自定义验证错误消息？

Question

我想在每个复选框组的每个复选框组旁边显示验证错误。我为每个创建了span元素，并希望显示错误，但不显示每个复选框组的复选框旁边。而是显示第一个复选框组旁边的每个复选框所需的错误。如何实现呢？

在波纹管图像中，验证信息显示在第一个复选框组旁边。

这是Html文件，

   <div class="other-complain-right">
                                    <ul>
                                        <li>
                                            <input type="checkbox" class="radio" value="1" name="IsBppStandard">
                                            <label>Yes</label>
                                            <input type="checkbox" class="radio" value="1" name="IsBppStandard">
                                            <label>No</label>
                                            <span id="ErrorIsBppStandard"></span>
                                        </li>
                                        <li>
                                            <input type="checkbox" class="radio" value="1" name="IsKycNorm">
                                            <label>Yes</label>
                                            <input type="checkbox" class="radio" value="1" name="IsKycNorm">
                                            <label>No</label>
                                            <span id="ErrorIsKycNorm"></span>
                                        </li>
                                        <li>
                                            <input type="checkbox" class="radio" value="1" name="IsKpcsSystem">
                                            <label>Yes</label>
                                            <input type="checkbox" class="radio" value="1" name="IsKpcsSystem">
                                            <label>No</label>
                                            <span id="ErrorIsKpcsSystem"></span>
                                        </li>
                                        <li>
                                            <input type="checkbox" class="radio" value="1" name="IsIndustryPractice">
                                            <label>Yes</label>
                                            <input type="checkbox" class="radio" value="1" name="IsIndustryPractice">
                                            <label>No</label>
                                            <span id="ErrorIsIndustryPractice"></span>
                                        </li>
                                        <li>
                                            <select>
                                                <option>Select Property</option>
                                            </select>
                                            <input type="text" name="" placeholder="Other">
                                        </li>
                                    </ul>
                                </div>

验证功能如下，

   $("#kycFormTab4").validate({
        errorLabelContainer: '#ErrorIsBppStandard',
        //errorLabelContainer: '#ErrorIsKycNorm',
        //errorLabelContainer: '#ErrorIsKpcsSystem',
        //errorLabelContainer: '#ErrorIsIndustryPractice',

        rules: {
            'IsBppStandard': {
                required: true,
            },
            'IsKycNorm': {
                required: true,
            },
              'IsKpcsSystem': {
                required: true,
            },
              'IsIndustryPractice': {
                  required: true,
            }
        },

        //specify validation error messages
        messages: {
            'IsBppStandard': {
                required: "You must check at least 1 box",
            },
            'IsKycNorm': {
                required: "You must check at least 1 box",
            },
            'IsKpcsSystem': {
                  required: "You must check at least 1 box",
             },
            'IsIndustryPractice': {
                  required: "You must check at least 1 box",
             }
        }

        //submitHandler: function(form){
        //    form.submit();
        //}

    });

Answer 1

您的问题是因为您正在使用errorLabelContainer，并将其设置为单个元素。这意味着所有错误都将放在同一位置。

要解决此问题，您需要使用errorPlacement代替，可以使用它来返回基于导致错误的元素放置错误的位置，如下所示：

$("#kycFormTab4").validate({
  errorPlacement: function($error, $element) {
    $error.appendTo($element.closest("li"));
  },
  rules: {
    'IsBppStandard': {
      required: true,
    },
    'IsKycNorm': {
      required: true,
    },
    'IsKpcsSystem': {
      required: true,
    },
    'IsIndustryPractice': {
      required: true,
    }
  },
  messages: {
    'IsBppStandard': {
      required: "You must check at least 1 box",
    },
    'IsKycNorm': {
      required: "You must check at least 1 box",
    },
    'IsKpcsSystem': {
      required: "You must check at least 1 box",
    },
    'IsIndustryPractice': {
      required: "You must check at least 1 box",
    }
  }
});

.error {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<form id="kycFormTab4">
  <div class="other-complain-right">
    <ul>
      <li>
        <input type="checkbox" class="radio" value="1" name="IsBppStandard">
        <label>Yes</label>
        <input type="checkbox" class="radio" value="1" name="IsBppStandard">
        <label>No</label>
        <span id="ErrorIsBppStandard"></span>
      </li>
      <li>
        <input type="checkbox" class="radio" value="1" name="IsKycNorm">
        <label>Yes</label>
        <input type="checkbox" class="radio" value="1" name="IsKycNorm">
        <label>No</label>
        <span id="ErrorIsKycNorm"></span>
      </li>
      <li>
        <input type="checkbox" class="radio" value="1" name="IsKpcsSystem">
        <label>Yes</label>
        <input type="checkbox" class="radio" value="1" name="IsKpcsSystem">
        <label>No</label>
        <span id="ErrorIsKpcsSystem"></span>
      </li>
      <li>
        <input type="checkbox" class="radio" value="1" name="IsIndustryPractice">
        <label>Yes</label>
        <input type="checkbox" class="radio" value="1" name="IsIndustryPractice">
        <label>No</label>
        <span id="ErrorIsIndustryPractice"></span>
      </li>
      <li>
        <select>
          <option>Select Property</option>
        </select>
        <input type="text" name="" placeholder="Other">
      </li>
    </ul>
  </div>
  <button>Submit</button>
</form>