How can I have the user click two Terms and Conditions before allowing them to proceed?

Question

I'm trying to make it so that a user has to accept two terms and conditions before being able to click the "Agree and Continue" button. I tried to insert a second checkbox but then the user can just click the "Agree and Continue" button without either box being checked, so this code only has one checkbox. Thanks!

<SCRIPT language=JavaScript>
<!--

function checkCheckBox(f){
if (f.agree.checked == false )
{
alert('Please check the box to continue.');
return false;
}else
return true;
}
//-->
</SCRIPT>

<form action="https://google.com" method="GET" onsubmit="return checkCheckBox(this)">

<!--Enter your form contents here-->
<input type="checkbox" value="0" name="agree">
<b> I Agree to the <a href="https://example.com/TOS">Terms and Conditions</a> and <a href="https://example.com/PP">Privacy Policy</a></b>
<br><br>
<b> I understand that I am accessing a third-party site and will abide by their <a href="https://example.com/TOS">Terms and Conditions</a> and <a href="https://example.com/PP">Privacy Policy</a></b><br>
<br>
<input type="submit" value="Agree and Continue">
</form>

score 0 · Answer 1 · answered Sep 28 '20 at 18:00

You can make the checkbox required with:

<form>
    <input type="email" required />
    <input type="password" required> 
    <input type="checkbox" required><label for="scales">I'm agree</label>
    <input type="submit">
</form>

It will generate:

You don't need any other javascript check, just the 'required' attributes.

score 0 · Answer 2 · answered Sep 28 '20 at 18:00

Add a second checkbox with an explicit name and then use the boolean "or", ||, to see if both are not checked. The else isn't needed because the first condition returns so it is safe to remove.

    function checkCheckBox(f) {
        if (!f.agree.checked || !f.agree_third_party.checked) {
            alert('Please check the box to continue.');
            return false;
        }

        return true;
    }

And alternative is to break it up so that you can give different messages:

    function checkCheckBox(f) {
        if (!f.agree.checked) {
            alert('Please check the first box to continue.');
            return false;
        }

        if (!f.agree_third_party.checked) {
            alert('Please check the second box to continue.');
            return false;
        }

        return true;
    }

Further, you can completely remove JavaScript and use the native HTML5 required attribute. (I couldn't help wrapping the checkboxes in labels for convenience and accessibility, but they aren't required.)

    <label for="agree">
        <input type="checkbox" value="0" name="agree" id="agree" required>
        <b> I Agree to the <a href="https://example.com/TOS">Terms and Conditions</a> and <a href="https://example.com/PP">Privacy Policy</a></b>
    </label>

    <br><br>

    <label for="agree_third_party">
        <input type="checkbox" value="0" name="agree_third_party" id="agree_third_party" required>
        <b> I understand that I am accessing a third-party site and will abide by their <a href="https://example.com/TOS">Terms and Conditions</a> and <a href="https://example.com/PP">Privacy Policy</a></b><br>
    </label>

And if you want to customize the message:

        <input type="checkbox" value="0" name="agree" id="agree" required
               oninvalid="this.setCustomValidity('You must agree to our terms and conditions.')"
               oninput="this.setCustomValidity('')"
        >

How can I have the user click two Terms and Conditions before allowing them to proceed?

2 Answers2