JSFiddle - React, Tailwind, and code Playground

by vinishanto

HTML

<div class="check-box"><fieldset>
<div class="form-field-checkbox radio-multiple submitted">
  <input type="radio" name="security_question" id="atfC0Mnms7DK" value="What is your first car" required="true">
  <label for="atfC0Mnms7DK">What is your first car</label>
</div>
<div class="form-field-checkbox radio-multiple submitted">
  <input type="radio" name="security_question" id="ZpCKwro309Sr" value="What is your first pet name">
  <label for="ZpCKwro309Sr">What is your first pet name</label>
</div>
<div class="form-field-checkbox radio-multiple submitted">
  <input type="radio" name="security_question" id="b4Qe5dEbHcFJ" value="What is your nickname">
  <label for="b4Qe5dEbHcFJ">What is your nickname</label>
</div>

</fieldset>

<button type="submit">
submit
</button>

</div>

SCSS

.form-field-checkbox {
            /* background-color: $white; */
            display: block;
            margin: 10px 0;
            position: relative;

             input:invalid + label{
                border: 1.5px solid #d30000;
                color: #d30000;
            }
            /* input:valid + label{
                border: 1.5px solid #d30000;
                color: green;
            } */
}

JavaScript

document.addEventListener("click", () => {
  for (let el of document.querySelectorAll('fieldset input')) {

      console.log("name:",el.nextSibling.nextSibling.textContent, "valid",el.checkValidity());
  }
});