<div class="p-3">
<form onsubmit="return validateForm(this)" action="https://postman-echo.com/post" method="post">
<div>
<input type="checkbox" name="agree" id="agree" value="yes" />
<label for="agree">I agree to the terms and conditions</label>
<div style="visibility:hidden; color:red" id="agree_chk_error">
Can't proceed as you didn't agree to the terms!
</div>
</div>
<div>
<input type="submit" name="submit" value="Submit"/>
</div>
</form>
</div>function validateForm(form)
{
console.log("checkbox checked is ", form.agree.checked);
if(!form.agree.checked)
{
document.getElementById('agree_chk_error').style.visibility='visible';
return false;
}
else
{
document.getElementById('agree_chk_error').style.visibility='hidden';
return true;
}
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.