The issue of Bootstrap form validation not functioning properly within a table containing a large checkbox

Question

The issue of Bootstrap form validation not functioning properly within a table containing a large checkbox

Currently utilizing Bootstrap version 5.3.3, I have the following structure established to create a large checkbox:

.form-check-input[type=checkbox].big-checkbox {
  transform: scale(3);
  margin: 1.5rem;
  border-radius: 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="23414c4c57505751425363160d100d10">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!-- Table and checkbox inside it without validation -->
<table>
  <tr>
    <td>
      <input type="checkbox" id="exampleOne" name="exampleOne" 
              class="form-check-input big-checkbox"
              checked
              >
    </td>
    <td>
      <label class="form-check-label" for="exampleOne">
        This checkbox does not have validation
      </label>
    </td>
  </tr>
</table>

<!-- Turn this into table with same layout and working validation feedback -->
<form id="form" novalidate>
  <div class="form-check mt-4 mb-3">
    <input type="checkbox" id="exampleTwo" name="exampleTwo"
           class="form-check-input big-checkbox"
           required
           >
    <label class="form-check-label" for="exampleTwo">
      This checkbox has validation 
      <a href="#" data-bs-toggle="modal" 
         data-bs-target="#universalModal"
         data-modal-id="testModal" 
         class="test-link"
         >
        Test link
      </a>
    </label>
    <div class="invalid-feedback">I am a red invalid feedback text.</div>
  </div>
</form>

In order to make the lower checkbox function similarly to the upper one while incorporating Bootstrap's form validation, adjustments need to be made. Utilizing a table layout like below:

<table>
  <tr>
    <td>
      <input type="checkbox" id="exampleTwo" name="exampleTwo"
              class="form-check-input big-checkbox"
              required
              >
    </td>
    <td>
      <label class="form-check-label" for="exampleTwo">
        This checkbox has validation 
        <a href="#" data-bs-toggle="modal" data-bs-target="#universalModal"
           data-modal-id="testModal" class="test-link"
           >
          Test link
        </a>
      </label>
      <div class="invalid-feedback">
        I am a red invalid feedback text.
      </div>
    </td>
  </tr>
</table>

When the large checkbox is invalid, it visually changes color but the label remains unchanged, and the invalid-feedback message does not display. The reason for this discrepancy is due to the separation of the input field, label, and feedback message within different cells of the table.
To ensure proper form validation functionality, all elements should ideally reside within the same parent element. Applying the 'big-checkbox' class in a non-table format can also cause appearance issues.

If you encountered this scenario, how would you address it to maintain consistent form validation behavior as expected within the Bootstrap framework?

html css validation bootstrap-5

Answer 1

Answer №1

Looks like you'll need to manually add validation feedback in this case. You're spot on about the styling being dependent on the element positions, as they should be subsequent-siblings.

You can try customizing the default Bootstrap form controls to resemble a table, or implement manual validation using JavaScript. Make sure to handle checking the checkbox, adding validation classes, and monitoring checkbox changes for all form controls accordingly.

function toggler(el, add) {
  if (add) {
    label.classList.add('invalid-feedback', 'd-block');
  } else {
    label.classList.remove('invalid-feedback', 'd-block');
  }
}

checkBox.addEventListener('change', (e) => {
  if (e.target.validity.valid) {
    toggler(e.target, false);
  } else {
    toggler(e.target, true);
  }
});

Check out the demo below:

.as-console-wrapper { max-height: 50px !important; bottom: 0; }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    .form-check-input[type=checkbox].big-checkbox {
      transform: scale(3);
      margin: 1.5rem;
      border-radius: 0;
    }
  </style>
</head>

<body class="p-3 m-0 border-0 bd-example m-0 border-0">
  <form class="row g-3" novalidate="" id="myForm">
    <table>
      <tr class="big-checkbox-cont">
        <td>
          <input type="checkbox" id="exampleOne" name="exampleOne" class="form-check-input big-checkbox" required>
        </td>
        <td>
          <label class="form-check-label" for="exampleOne">
              This checkbox does not have validation
            </label>
        </td>
      </tr>
    </table>

    <div class="col-12">
      <button class="btn btn-primary mt-2" type="submit">Submit form</button>
    </div>
  </form>

  <script>
    const checkBoxCont = document.querySelector('.big-checkbox-cont');
    const checkBox = checkBoxCont.querySelector('input');
    const label = checkBoxCont.querySelector('label');

    function toggler(el, add) {
      if (add) {
        label.classList.add('invalid-feedback', 'd-block');
      } else {
        label.classList.remove('invalid-feedback', 'd-block');
      }
    }

    checkBox.addEventListener('change', (e) => {
      if (e.target.validity.valid) {
        toggler(e.target, false);
      } else {
        toggler(e.target, true);
      }
    });

    document.querySelector('#myForm').addEventListener('submit', (e) => {
      e.preventDefault();

      const form = e.target;

      if (form.checkValidity()) {
        console.log('form valid');
      } else {
        console.log('form not valid');
        form.classList.add('was-validated');

        if (!checkBox.validity.valid) {
          toggler(e.target, true);
        }
      }
    });
  </script>

  <!-- End Example Code -->
</body>

</html>

Answer 2

Looks like you'll need to manually add validation feedback in this case. You're spot on about the styling being dependent on the element positions, as they should be subsequent-siblings.

You can try customizing the default Bootstrap form controls to resemble a table, or implement manual validation using JavaScript. Make sure to handle checking the checkbox, adding validation classes, and monitoring checkbox changes for all form controls accordingly.

function toggler(el, add) {
  if (add) {
    label.classList.add('invalid-feedback', 'd-block');
  } else {
    label.classList.remove('invalid-feedback', 'd-block');
  }
}

checkBox.addEventListener('change', (e) => {
  if (e.target.validity.valid) {
    toggler(e.target, false);
  } else {
    toggler(e.target, true);
  }
});

Check out the demo below:

.as-console-wrapper { max-height: 50px !important; bottom: 0; }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    .form-check-input[type=checkbox].big-checkbox {
      transform: scale(3);
      margin: 1.5rem;
      border-radius: 0;
    }
  </style>
</head>

<body class="p-3 m-0 border-0 bd-example m-0 border-0">
  <form class="row g-3" novalidate="" id="myForm">
    <table>
      <tr class="big-checkbox-cont">
        <td>
          <input type="checkbox" id="exampleOne" name="exampleOne" class="form-check-input big-checkbox" required>
        </td>
        <td>
          <label class="form-check-label" for="exampleOne">
              This checkbox does not have validation
            </label>
        </td>
      </tr>
    </table>

    <div class="col-12">
      <button class="btn btn-primary mt-2" type="submit">Submit form</button>
    </div>
  </form>

  <script>
    const checkBoxCont = document.querySelector('.big-checkbox-cont');
    const checkBox = checkBoxCont.querySelector('input');
    const label = checkBoxCont.querySelector('label');

    function toggler(el, add) {
      if (add) {
        label.classList.add('invalid-feedback', 'd-block');
      } else {
        label.classList.remove('invalid-feedback', 'd-block');
      }
    }

    checkBox.addEventListener('change', (e) => {
      if (e.target.validity.valid) {
        toggler(e.target, false);
      } else {
        toggler(e.target, true);
      }
    });

    document.querySelector('#myForm').addEventListener('submit', (e) => {
      e.preventDefault();

      const form = e.target;

      if (form.checkValidity()) {
        console.log('form valid');
      } else {
        console.log('form not valid');
        form.classList.add('was-validated');

        if (!checkBox.validity.valid) {
          toggler(e.target, true);
        }
      }
    });
  </script>

  <!-- End Example Code -->
</body>

</html>

Answer 3

Answer №2

This particular issue is quite uncommon, but fear not, there is a straightforward solution at hand. Bootstrap, being a CSS library, may sometimes clash with custom styles, leading to minor complications.

In your specific scenario, all configurations seem to be in order; however, the form-check class within Bootstrap introduces default padding that is causing the hiccup. To address this, simply incorporate the p-0 class (to eliminate the padding) and make necessary adjustments for alignment.

Let me provide you with an illustrative example of how to refine your code:

Your original code snippet:

<div class="form-check mt-4 mb-3">

The enhanced code snippet:

<div class="form-check mt-4 mb-3 p-0 d-inline-flex align-items-center">

In the upgraded version of the code, I have included the p-0 element to eradicate the padding, and utilized d-inline-flex align-items-center for centralized alignment of elements.

I trust this adjustment will prove effective for you :)

Answer 4

This particular issue is quite uncommon, but fear not, there is a straightforward solution at hand. Bootstrap, being a CSS library, may sometimes clash with custom styles, leading to minor complications.

In your specific scenario, all configurations seem to be in order; however, the form-check class within Bootstrap introduces default padding that is causing the hiccup. To address this, simply incorporate the p-0 class (to eliminate the padding) and make necessary adjustments for alignment.

Let me provide you with an illustrative example of how to refine your code:

Your original code snippet:

<div class="form-check mt-4 mb-3">

The enhanced code snippet:

<div class="form-check mt-4 mb-3 p-0 d-inline-flex align-items-center">

In the upgraded version of the code, I have included the p-0 element to eradicate the padding, and utilized d-inline-flex align-items-center for centralized alignment of elements.

I trust this adjustment will prove effective for you :)

The issue of Bootstrap form validation not functioning properly within a table containing a large checkbox

Answer №1

Answer №2

Similar questions

Setting the width to auto, height to 100, and using overflow hidden does not produce the desired result

Selenium Timeout Error: Locator Not Found

The Salvattore grid became unresponsive and malfunctioned as soon as AngularJS was integrated

What benefits do unordered lists <ul>s offer in terms of SEO, accessibility, and beyond for website navigation?

Instructions for submitting a form to an HTML page in Django

Receive a login submission request from a website

Simple steps to increase the gap between columns in Bootstrap 4

Ways to retrieve the child number using JavaScript or PHP

Wheel of fortune - The chosen option does not align with the indicator

The lovely border image vanished mysteriously from Safari on both OS and iOS

Is it possible to configure mui v5 to display class names without the css-xxx prefix?

Unusual alignment glitch

What steps should be taken to populate a grid row if a certain div element is not present?

Could Flexbox CSS be used to create a responsive layout like this?

Struggling to achieve full height for div content between header and footer using Bootstrap 4?

How can we develop play buttons for Facebook timelines similar to those found on Spotify?

Tips for Implementing CSS Styles on Ruby on Rails HTML Pages

Even after setting a value to an HTML input field from the C# code behind, any modifications to the text are not being displayed

Discovering a locator based on the initial portion of its value

Conceal table rows with JQuery in html