Select a gender, agree to the terms, then press Submit. Reset clears the form and message.
JS Validation Checkbox validation Checkbox JavaScript
<form id="terms-form" action="" method="post">
<fieldset>
<legend>Gender</legend>
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
</fieldset>
<label><input type="checkbox" name="agree" value="yes"> I agree to terms and conditions</label>
<div id="my_msg" aria-live="polite">Submit the form by clicking the button</div>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
const form = document.getElementById("terms-form");
const message = document.getElementById("my_msg");
form.addEventListener("submit", (event) => {
event.preventDefault();
const gender = form.querySelector('input[name="gender"]:checked');
const agree = form.elements.agree.checked;
if (!gender) {
message.textContent = "Select gender before submitting.";
return;
}
if (!agree) {
message.textContent = "Agree to the terms and conditions before submitting.";
return;
}
message.textContent = "Validation is complete.";
});
form.addEventListener("reset", () => {
message.textContent = "Submit the form by clicking the button";
});