Question

如何获取只有一个自定义jquery验证消息，并且如果复选框名称是带索引的数组，则在<div>上面的元素中。

<div class="error">Error will show here</div>
<input type="checkbox" value="0" name="is_appraisal[0]" class="is_appraisal_f siblingcheckbox" id="is_appraisal_f">

<input type="checkbox" value="0" name="is_appraisal[1]" class="is_appraisal_s siblingcheckbox" id="is_appraisal_s">

我尝试了这个，但它无法正常工作

   $.validator.addMethod("onechecked", function (value, elem, param) {
            if ($(".siblingcheckbox:checkbox:checked").length > 0) {
                return true;
            } else {
                return false;
            }
        }, "Please select any one of the following!");

        $.validator.addClassRules("siblingcheckbox", {
            onechecked: true
   });

验证工作正常，但这会在checkbox.Any Help？

下面给出错误消息

Answer 1

如果您希望所有jQuery Validate错误消息都出现在您要使用的地方。http://docs.jquery.com/Plugins/Validation/validate#toptions在该页面上找到errorPlacement选项。

1）如果您想为所有错误进行自定义展示位置，可以执行以下操作：

$("#myform").validate({
  errorPlacement: function(error, element) {
     error.appendTo('#errordiv');
   }
});

2）如果要为一个或多个错误标签指定特定位置，可以执行此操作。

errorPlacement: function(error, element) {
    if (element.attr("name") == "email" )
        error.insertAfter(".some-class");
    else if  (element.attr("name") == "phone" )
        error.insertAfter(".some-other-class");
    else
        error.insertAfter(element);
}

编辑

此波纹管代码添加到您的验证功能

$("#YOURFORMID").validate({
            errorPlacement: function(error, element) {
                 error.appendTo('.error');
            },
            success: function(label,element) {
               $('.error').html('');
            }   

});

注意::复选框的名称不同（is_appraisal [0]，is_appraisal [1]）因此消息将显示两次。

同时检查下面的复选框组的轰鸣声片段工作演示在自定义位置设置自定义消息进行验证

$(document).ready(function(){
            $("#myform").validate({
                  rules: {
                    "is_appraisal[]": "required",

            },
            messages: {
              "is_appraisal[]": "Please select any one of the following!",
              },
              errorPlacement: function(error, element) {
                 error.appendTo('.error');
               }
            });
  });

.error
{
  color:red;
  }

<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.15.0/jquery.validate.min.js"></script>
<div class="error"></div>
<form  name="myform" id="myform" action="" method="post">
        <input type="checkbox" value="0" name="is_appraisal[]" class="is_appraisal_f siblingcheckbox" id="is_appraisal_f">
        <input type="checkbox" value="0" name="is_appraisal[]" class="is_appraisal_s siblingcheckbox" id="is_appraisal_s">
        <input type="submit" >
    </form>

演示链接https://jsfiddle.net/9q0jwxo6/1/

Answer 2

Jquery验证库为每个无效的html元素生成一个标签，如：

<label id="email_id-error" class="error" for="email_id">Please enter your Email.</label>

只需从html dom复制此标签并删除其错误消息并将其放在您想要错误消息的位置。现在，错误消息的位置就是这个标签的位置。

Jquery验证对于带索引的复选框

2 个答案: