Error Styling: Using CSS to Highlight Invalid Checkboxes within a Group

Is there a way to create a bordered red box around checkboxes that are required but not selected? Here is the code I currently have:

<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 snippet is from my stylesheet:

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

The current CSS implementation doesn't seem to be working as expected. I am unable to add any additional classes or IDs in the CSS file, and can only use existing ones. The ".invalid" class comes from a typescript file which should display all invalid elements after the user submits the form.

Do you have any suggestions on how to modify the CSS so that the bordered box displays properly?

Here are some references I used: Delay HTML5 :invalid pseudo-class until the first event, Applying border to a checkbox in Chrome.

csstypescriptbootstrap-4

Answer №1

Utilize jQuery.

The method consists of three steps:

  1. Enclose the inputs in a form element
  2. Add the required attribute to all inputs
  3. Use jQuery to eliminate the attribute from all inputs once at least one input is checked

Explanation of How This Method Works

An empty required input within the form renders it invalid

This allows you to target the :invalid form in CSS to apply a border if no inputs are checked.

Example in Action: 

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps do I need to take in order to load the static folder from a CSS file?

Is there a way to load the static folder from a CSS file? I attempted to import using URL(), however, it was unsuccessful. I am looking to utilize the static path in order to apply a background to an element. .input_card:checked+.check-box { backgroun ...

pythoncssdjango

Encountering a compiler error due to lack of patience for a promise?

In the current TypeScript environment, I am able to write code like this: async function getSomething():Promise<Something> { // ... } And later in my code: const myObject = getSomething(); However, when I attempt to use myObject at a later po ...

typescriptasync-await

The source code in VS Code was not accurately linked

I'm currently facing an issue with running my angular2 project from vs code. Below are the contents of my tsconfig and launch.json files. tsconfig.json { "compilerOptions": { "declaration": false, "emitDecoratorMetadata": true, "experi ...

javascriptangulartypescriptvisual-studio-code

What are the best strategies to perfectly insert an image within a div, ensuring that no background color is visible?

Is there a way to fix the issue of a white background appearing at the bottom of this div? .flexbox-item_one { display: inline-block; width: 200px; margin: 10px; background-color: white; box-shadow: 5px 5px 5px; overflow: hidden; } .flexb ...

htmlcss

Creating a customized design for your jQuery UI modal dialog box using CSS

I recently had to customize the jqueryui modal dialog in order to meet the standards set by my company. Currently, I am facing a cross-browser issue with the float and width of the input labels. You can view the sample website here: http://inetwebdesign. ...

jquerycssuser-interfacedialogmodal-dialog

Animate images using mouse vertical movement

Creating websites is just a hobby for me, not something professional. Recently, I came across a beautifully designed website that had some unique features I hadn't seen before, like placing three images in one div (which I researched and learned how t ...

javascriptjqueryhtmlcss

Struggling to eliminate the scrollbar on a Material UI Dialog

I have a modal window that includes a keyboard, but I'm encountering some issues. Despite adding overflow:'hidden' as inline CSS, the scrollbar refuses to disappear. Furthermore, even when utilizing container-full padding-0 in Bootstrap, th ...

javascriptcssreactjsmaterial-ui

The cucumber_report.json file will not update to reflect the most recent test steps

I have encountered an issue with the cucumber_reporter.json file not overwriting under the reports/html folder in my framework. To address this, I made changes to the cucumberOpts option within my config.ts file. By modifying the format setting to "json:./ ...

typescriptprotractorcucumberappium

What are some ways to ensure text stands out against a gradient backdrop?

Is there a way to ensure that text adjusts automatically to a background transition from one color to another using only CSS? I've tried using "mix-blend-mode:difference" from a forum, but it had no effect on the text. .container{ color: white; ...

csshtmlbackground-colorlinear-gradients

Using an early return statement in Typescript triggers the Eslint error "no useless return"

Could you please provide some feedback on the Typescript function I have written below? The function is meant to check for validation, and if it fails, exit out of the submit function. However, ESLint is flagging a 'no-useless-return' error. I&ap ...

typescripteslinttypescript-eslint

The issue with `allowInputToggle` not functioning in a Bootstrap 4 project needs to be addressed in tempusdominus

I recently started using tempusdominus and was trying to implement the allowInputToggle property. More information can be found here: The objective is to have the calendar open when the user clicks into an <input>, instead of having to click on the ...

jquerybootstrap-4tempus-dominus-datetimepicker

Differentiating response.data typing on the front end in Typescript depending on the request's success status

Consider this scenario: A secure API authentication route that I am not allowed to access for viewing or editing the code returns interface AuthSuccess { token: string user: object } on response.data if the email and password provided are correct, but ...

typescriptnext.jsaxios

Issue with Prettier AutoFormatting in a project that combines TypeScript and JavaScript codebases

Recently, I've started incorporating TypeScript into an existing JavaScript project. The project is quite large, so I've decided to transition it to TypeScript gradually. Below is a snippet from my eslintrc.js file: module.exports = { parser: ...

javascripttypescriptprettiereslint-config-airbnb

What is the best way to define a function that accepts an object with a specific key, while also allowing for any additional keys to be passed

Typescript allows us to define an interface for an object that must have a key and can also allow additional keys: interface ObjectWithTrace { trace: string; [index: string]: any } const traced: ObjectWithTrace = { trace: 'x', foo: 'bar ...

typescripttypescript-generics

Map on leaflet not showing up

I followed the tutorial at http://leafletjs.com/examples/quick-start/ as instructed. After downloading the css and js files to my local directory, I expected to see a map but all I get is a gray background. Can anyone advise me on what might be missing? T ...

javascriptcssleaflet

Revealing Transition Element on mouseover

My side-menu consists of icons that display text to the right upon hovering over them. I want the text to show up and the div to expand smoothly with a sliding transition, ideally without the need for additional JavaScript. Is there a way to achieve this? ...

htmlcssbootstrap-5

What is the best way to simulate global variables that are declared in a separate file?

dataConfiguration.js var userData = { URIs: { APIURI: "C" }, EncryptedToken: "D" }; configSetup.js config.set({ basePath: '', files:['dataConfiguration.js' ], ..... UserComponentDetails: .....some i ...

javascriptangulartypescriptunit-testingjasmine

In Internet Explorer 8, the Radmenu hover menu may appear below surrounding Radmenus

Utilizing a radmenu, I am able to dynamically generate a submenu structure by examining folders in sharepoint document libraries. However, when placing multiple controls on the page, the root menu from other controls overlaps with the submenu of the curren ...

htmlcssinternet-explorertelerik

Can a YouTube video be triggered to play when a specific CSS style is selected?

I am searching for a method to display and play different YouTube videos based on a selected CSS style from a drop-down menu. I believe JavaScript can be utilized to detect the chosen CSS. Include the following in the html header of the page. <script ...

javascriptcsshtmlyoutubeembed

Error: Module not found - Issue with importing SVG files in NextJS

Currently, I am utilizing the babel plugin inline-react-svg to import inline SVGs in NextJS. Here is a snippet from my .babelrc configuration file: { "presets": ["next/babel"], "plugins": [ "inline-react-svg" ...

reactjstypescriptfrontendnext.jsbabeljs