Form validation using only JavaScript

I’m currently working on a simple form and I can’t for the life of me get the validation for the radio buttons and checkboxes right! I want to validate if the user chose at least 1 radio button and 1 to 2 checkboxes and if not, show a message next to the label. Afterwards I want to send all these information to an HTML page (for this task should I use POST? I’ve seen people use GET and I’m confused)

Here is how I validated the username

HTML:

<form autocomplete="on" id="form" method="POST">

  <label for="username">Name:<span aria-hidden="true">*</span></label><br>
  <input type="text" id="username" aria-describedby="usernameError" required placeholder="John Smith">
  <div id="usernameError" class="error"></div><br>



  <label for="age">Age:</label>
  <div id="ageError" class="error"></div><br>
  <input type="radio" name="age" id="18-35" value="18-35" aria-describedby="ageError" required>18-35<br>
  <input type="radio" name="age" id="35-50" value="35-50" aria-describedby="ageError" required>35-50<br>
  <input type="radio" name="age" id="50" value="50<" aria-describedby="ageError" required>50 and above<br><br>



  <label for="cars" id="cars_checkboxes">Cars available to test drive:</label>
  <div id="carsRequirements" class="requirements">You must choose at least 1 car and at most 3 cars</div>
  <div id="carsError" class="error"></div><br>
  <input type="checkbox" name="carBrands" id="Toyota" value="Toyota" aria-describedby="carsError" required>Toyota
  <input type="checkbox" name="carBrands" id="Jeep" value="Jeep" aria-describedby="carsError" required>Jeep<br>
  <input type="checkbox" name="carBrands" id="Honda" value="Honda" aria-describedby="carsError" required>Honda
  <input type="checkbox" name="carBrands" id="Ford" value="Ford" aria-describedby="carsError" required>Ford<br>
  <input type="checkbox" name="carBrands" id="Lexus" value="Lexus" aria-describedby="carsError" required>Lexus<br><br><br>



  <input type="reset" value="Reset">
  <input type="submit" value="Submit" class="submit-btn">
</form>

JavaScript:

const form = document.getElementById("form");
form.setAttribute("novalidate", "");
form.addEventListener("submit", (event) => {
  const allInputsValid = event.target.checkValidity();
  if (!allInputsValid) {
    event.preventDefault();
  }
});


const messages = {
  username: {
    valueMissing: "Please enter a name.",
  },
};


function handleInvalidInput(event) {
  const input = event.target;
  input.setAttribute("aria-invalid", true);
  const validity = input.validity;
  const inputMessages = messages[input.id];
  let message = "";
  if (validity.valueMissing) {
    message = inputMessages.valueMissing;
  }
  if (input.type === "text") {
    input.style.border = "solid red 2px";
  }
  const errorId = input.id + "Error";
  const errorContainer = form.querySelector("#" + errorId);
  errorContainer.textContent = message;
}


function clearValidity(event) {
  const input = event.target;
  input.setAttribute("aria-invalid", "false");
  if (input.type === "text") {
    input.style.border = "";
  }
  const errorId = input.id + "Error";
  const errorContainer = form.querySelector("#" + errorId);
  errorContainer.textContent = "";
}

I know how to validate that in the sense that I would go about it like this:

For the checkboxes:

num_of_cars = document.querySelectorAll('input[name="carBrands"]:checked').length;

if (num_of_cars < 1 || num_of_cars > 2) {

return true;

} else {

return false;

}

And for the age:

const age = document.getElementById("age");

if (!age.checked) {

return true;

} else {

return false;

}

But whenever I put them in a function and try to call them inside the event listener of submit everything just stops working even the username validation