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

阿尔卡·瓦格拉

我想在每个复选框组的每个复选框组旁边显示验证错误。我已经为每个创建了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();
        //}

    });
罗里·麦克罗森(Rory McCrossan)

您的问题是因为您正在使用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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章