最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to group checkboxes for validation in Bootstrap - Stack Overflow

programmeradmin7浏览0评论

I have a simple form which has 2 checkboxes. I want to submit the form if any one of the checkbox is checked. Below code requires to check both of them. I tried grouping checkboxes by using name attribute but thats not sufficient, I am missing something. How can we group checkboxes for validation so that if any one is selected then form should be submited. Any suggestion would be helpful.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=".0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<form class="needs-validation" novalidate>

    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="Check1" name="select" required>
      <label class="form-check-label" for="Check1">Option 1</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="Check2" name="select" required>
      <label class="form-check-label" for="Check2">Option 2</label>
    </div>

  <button class="btn btn-primary" type="submit">Submit</button>

</form>

<script>

(function() {
  'use strict';
  window.addEventListener('load', function() {

    var forms = document.getElementsByClassName('needs-validation');

    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>
</body>
</html>

I have a simple form which has 2 checkboxes. I want to submit the form if any one of the checkbox is checked. Below code requires to check both of them. I tried grouping checkboxes by using name attribute but thats not sufficient, I am missing something. How can we group checkboxes for validation so that if any one is selected then form should be submited. Any suggestion would be helpful.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<form class="needs-validation" novalidate>

    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="Check1" name="select" required>
      <label class="form-check-label" for="Check1">Option 1</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="Check2" name="select" required>
      <label class="form-check-label" for="Check2">Option 2</label>
    </div>

  <button class="btn btn-primary" type="submit">Submit</button>

</form>

<script>

(function() {
  'use strict';
  window.addEventListener('load', function() {

    var forms = document.getElementsByClassName('needs-validation');

    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>
</body>
</html>
Share Improve this question asked Feb 14, 2018 at 11:11 Olivia BrownOlivia Brown 6424 gold badges16 silver badges28 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

Try the below.

Essentially it dynamically enables or disables the required attribute depending on whether at least one checkbox is checked. Then the browser validation is run as normal. But by only including one invalid-feedback div you only see one warning per "checkbox group".

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<form class="needs-validation" novalidate>

    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="Check1" name="select" required>
        <label class="form-check-label" for="Check1">Option 1</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="Check2" name="select" required>
        <label class="form-check-label" for="Check2">Option 2</label>
        <div class="invalid-feedback">Choose at least one.</div>
    </div>

    <button class="btn btn-primary" type="submit">Submit</button>

</form>

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery./jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script>
    (function () {
        'use strict';
        window.addEventListener('load', function () {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function (form) {
                form.addEventListener('submit', function (event) {

                    var failed = false;

                    if ($("[name='select']:checked").length == 0) {
                        $("[name='select']").attr('required', true);
                        failed = true;
                    }
                    else {
                        $("[name='select']").attr('required', false);
                    }

                    if (form.checkValidity() === false) {
                        failed = true;
                    }

                    if (failed == true) {
                        event.preventDefault();
                        event.stopPropagation();
                    }

                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();
</script>
</body>
</html>

remove the 'required' from the input tag.

<div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="Check1" name="select" >
      <label class="form-check-label" for="Check1">Option 1</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="Check2" name="select" >
      <label class="form-check-label" for="Check2">Option 2</label>
    </div>
发布评论

评论列表(0)

  1. 暂无评论