javascript - 两组复选框的警告消息

Question

大家好，我有 jQuery 代码来验证复选框是否被选中，如果没有则显示警告消息。一切正常。两组不同的复选框有两条消息。目前这两条消息都显示在最后一个复选框下。我想要的是在“同意”复选框下显示同意消息，并在“选项”复选框组下选择一个选项。这是 JSFiddle .

代码如下:

$(document).ready(function() {
    var checkboxes = $('.require-one');
    var checkbox_names = $.map(checkboxes, function(e, i) {
        return $(e).attr("name")
    }).join(" ");

    $("#itemForm").validate({
        groups: {
            checks: checkbox_names
        },
        rules: {
            resp01: 'required',
        },
        messages: {
            resp01: {
                required: 'You must agree before submitting!'
            },
        },

        errorPlacement: function(error, element) {
            $('#form_error').append(error);
        },

        submitHandler: function(form) {
            alert('Form Submited');
            return false;
        }

    });
});

$.validator.addMethod('require-one', function(value) {
    if ($('#resp01').is(':checked')) {
        return $('.require-one:checked').size() > 0;
    } else {
        return true;
    }
}, 'Please select one of the options.');

感谢任何帮助。

Answer 1

给你。当您在 errorPlacement 函数中时，您可以检查您的 element 是否具有特定功能。因为在插入错误信息之前，你需要知道哪个元素已经过验证。在本例中，我使用了元素的类。

$(document).ready(function() {

  var checkboxes = $('.require-one');
  var checkbox_names = $.map(checkboxes, function(e, i) {
    return $(e).attr("name")
  }).join(" ");

  $("#itemForm").validate({
    groups: {
      checks: checkbox_names
    },
    rules: {
      resp01: 'required',
    },
    messages: {
      resp01: {
        required: 'You must agree before submitting!'
      },
    },
    errorPlacement: function(error, element) {
      if ($(element).hasClass("require-one")) {
        $('#require-one-error').append(error);
      } else {
        $('#resp-error').append(error);
      }
    },
    submitHandler: function(form) {
      alert('Form Submited');
      return false;
    }

  });
});

$.validator.addMethod('require-one', function(value) {
  if ($('#resp01').is(':checked')) {
    return $('.require-one:checked').size() > 0;
  } else {
    return true;
  }
}, 'Please select one of the options.');

* {
  font-family: Verdana;
  font-size: 96%;
}

label.error {
  float: none;
  color: red;
  margin: 0 .5em 0 0;
  vertical-align: top;
  font-size: 10px;
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>

<form name="itemForm" id="itemForm" method="post">
  <fieldset style="width:200px">
    <legend>OPTIONS</legend>
    <input id="opt01" name="opt01" type="checkbox" value="true" class="require-one" />
    <label for="opt01">opt01</label>
    <input name="opt01" type="hidden" value="false" />
    <br />

    <input id="opt02" name="opt02" type="checkbox" value="true" class="require-one" />
    <label for="opt02">opt02</label>
    <input name="opt02" type="hidden" value="false" />
    <br />

    <input id="opt03" name="opt03" type="checkbox" value="true" class="require-one" />
    <label for="opt03">opt03</label>
    <input name="opt03" type="hidden" value="false" />
    <br />
  </fieldset>
  <div class="error require-one-error" id="require-one-error"></div>
  <p>
    <input name="resp01" type="checkbox" value="Agree" id="resp01" class="resp" />
    <label for="resp01">Agree</label>
  </p>
  <div class="error" id="resp-error"></div>
  <input type="submit" />
</form>