两组复选框的警告消息

Warning messages for two groups of checkboxes

本文关键字：警告 消息 复选框 两组      更新时间：2023-10-20

大家好，我有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.');

感谢您的帮助。

给你。当您使用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>

相关文章：