CSS Checkbox Invalid Error Border Box Around Group of Options

Question

How could I create a bordered red box around checkboxes that weren't selected but were required? I have it written this way at the moment.

    <div class="fb-checkbox-group form-group field-checkbox-group-1500575975893">
   <label for="checkbox-group-1500575975893" class="fb-checkbox-group-label">Checkbox Group</label>
   <div class="checkbox-group">
      <div class="checkbox"><label for="checkbox-group-1500575975893-0"><input name="checkbox-group-1500575975893[]" value="option-1" type="checkbox">Option 1</label></div>
      <div class="checkbox"><label for="checkbox-group-1500575975893-1"><input name="checkbox-group-1500575975893[]" value="option-2" type="checkbox">option2</label></div>
      <div class="checkbox"><label for="checkbox-group-1500575975893-2"><input name="checkbox-group-1500575975893[]" value="option-3" type="checkbox">option-3</label></div>
   </div>
</div>

This is part of my stylesheet.

.invalid checkbox-group:required:invalid {
    border: 3px solid #900;
}

My code does not produce anything. I cannot add any extra classes or IDs when I adjust the CSS, I can only use the classes or IDs I have. The .invalid comes from a typescript file. The type script file is suppose to show all the invalid elements after the user presses submit.

Was I close or am I wayyy off. Any advice for on how to change the css so I could get the bordered box to show up correctly?

Here are some of my sources: Delay HTML5 :invalid pseudo-class until the first event , Applying border to a checkbox in Chrome ,

Are "required" & "invalid" classes that are added by your type script file? Are they added to
or to the input tag? — Lee Wise, Jul 21 '17 at 02:12
They are added to my Typescript file. They aren't added to the
or the input tag. — jessicalam, Jul 21 '17 at 12:44

I haz kode · Answer 1 · 2017-07-21T03:29:53.010

Use jQuery.

There are three steps to this method:

wrap the inputs in a form element
add required attribute to all inputs
use jQuery to remove the attribute from all inputs once at least one input is checked

Why this works

Empty required inputs inside the form make it invalid

You can then target the :invalid form in CSS to create the border if no inputs are checked.

Working example:

var checkboxes = $("input[type='checkbox']");

checkboxes.click(function() {
  !checkboxes.attr("required", !checkboxes.is(":checked"));
});

#myform {
  width: 200px;
  padding: 10px;
  border: 1px solid transparent
}

#myform:invalid {
  border: 1px solid red 
}

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

<form id="myform">
  <label>Checkbox Group</label>
  <div>
    <input type="checkbox" name="option-1" id="option-1" required> <label for="option-1">Option 1</label>
  </div>
  <div>
    <input type="checkbox" name="option-2" id="option-2" required> <label for="option-2">Option 2</label>
  </div>
  <div>
    <input type="checkbox" name="option-3" id="option-3" required> <label for="option-3">Option 3</label>
  </div>
  <div>
    <input type="checkbox" name="option-4" id="option-4" required> <label for="option-4">Option 4</label>
  </div>
  <div>
    <input type="checkbox" name="option-5" id="option-5" required> <label for="option-5">Option 5</label>
  </div>
</form>

CSS Checkbox Invalid Error Border Box Around Group of Options

1 Answers1

Why this works