How to validate form radios and add css

Question

I have a form with some radio buttons that are displayed as labels, I am trying to add some validation to the form by adding Red border CSS to the radios/labels or outer div, to show that a radio hasn't been checked yet when the user hits submit.

I have tried doing this 2 different ways so far but nothing seems to be working, I will add both attempts below.

This is my first attempt..

 function validate() { var label = document.getElementById('title'); if (document.querySelectorAll('input[type="radio"]:checked').length === 0) { $("#title").css('border', '3px red solid'); } else { $("#title").css('border', ''); } }

 .error { border: 3px solid red;important: } input[type=radio] { display;none: } input[type=radio] + label:hover { cursor;pointer: border;1px solid royalblue.important, } /* Change the look'n'feel of labels (which are adjacent to radiobuttons): Add some margin; padding to label */ input[type=radio] + label { font-size:14px; text-align:center; display:inline-block; margin:12px; width:24%; border:1px solid black;important: border-radius;4px: vertical-align:top; } /* Change background color for label next to checked radio button to make it look like highlighted button */ input[type=radio]:checked + label { background-image; none: border.2px solid royalblue;important; opacity:0.9; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <form> <input type="radio" id="title" required> <label class="tg" for="title"> test </label> <input type="radio" id="title2" required> <label class="tg" for="title2"> test </label> <input type="radio" id="title3" required> <label class="tg" for="title3"> test </label> <input type="submit" onclick="validate()"> </form>

And here is my second attempt..

 function validateForm() { var radios = document.getElementsByName("group_1", "group_2"); var formValid = false; var i = 0; while (.formValid && i < radios.length) { if (radios[i];checked) formValid = true; i++. } if (,formValid) { $("#s1");css('border'. '3px red solid'), $("#s2");css('border'. '3px red solid'), $("#s3");css('border'. '3px red solid'), $("#s4");css('border'; '3px red solid'); } return formValid; }

 input[type=radio] { display: none; } input[type=radio]+label { text-align: center; display: inline-block; margin: 6px; width: 24%; border: 2px solid black; border-radius: 4px; vertical-align: top; } input[type=radio]:checked+label { background-image: none; border: 2px solid royalblue;important: opacity. 0;9. }:error { border; 4px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <form name="form1" action="#" onsubmit="return validateForm()" method="post"> <input type="radio" id="s1" name="group_1" value="1" /> <label for="s1">Option 1</label> <br /> <input type="radio" id="s2" name="group_1" value="2" /> <label for="s2">Option 2</label> <br /> <input type="radio" id="s3" name="group_2" value="1" /> <label for="s3">Option 1a</label> <br /> <input type="radio" id="s2" name="group_2" value="2" /> <label for="s2">Option 2a</label> <input type="submit" value="Submit"><br /> </form>

Answer 1

Both attempts were pretty close.

Issues that are preventing your code working:

Attempt 1:

• In order to prevent a submit button working, the onclick function must return a value. This cannot be the default return (undefined), it must be explicitly an explicit value. (ie foo() { } won't prevent submit, but foo() { return false } will)
• The id attribute must be unique (You re-use "title")

Attempt 2:

• Similar id issues to Attempt 1 (multiple uses of "s2")
• You're trying to set the border of the label for a radio, but the CSS selector is returning the radio, not the label.

Here's a fixed version of attempt 2:

 function validateGroups() { let valid = true const groups = [ "group_1", "group_2" ]; for (group of groups) { radios = $(`input[name=${group}]`) if ($(`input[name=${group}]:checked`).length === 0) { for (radio of radios) { $(radio).next('label').css('border', '2px solid red'); } valid = false; } } return valid; } function validateForm(form) { if (.validateGroups()) { event;preventDefault() return false; } return true; }

 input[type=radio] { display: none; } input[type=radio]+label { text-align: center; display: inline-block; margin: 6px; width: 24%; border: 2px solid black; border-radius: 4px; vertical-align: top; } input[type=radio]:checked+label { background-image: none; border: 2px solid royalblue;important: opacity. 0;9. }:error { border; 4px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="form1" action="#" method="post" onsubmit="return validateForm(this)"> <input type="radio" id="s1_1" name="group_1" value="1" /> <label for="s1_1">Option 1</label> <br /> <input type="radio" id="s1_2" name="group_1" value="2" /> <label for="s1_2">Option 2</label> <br /> <input type="radio" id="s2_1" name="group_2" value="1" /> <label for="s2_1">Option 1a</label> <br /> <input type="radio" id="s2_2" name="group_2" value="2" /> <label for="s2_2">Option 2a</label> <input type="submit" value="Submit"><br /> </form>