onClick test case

onClick test case

by Jim Adamson

HTML

<form name="disabilities_form" method="POST">
    <h1>onClick test case</h1>
    <p>This works as wanted. Just one click on the submit button invokes the error bubble.</p>
    <fieldset>
        <p>
            <label for="keepintouch"><span style="color:red">&#9733;</span> How would you like to keep in touch with each other?</label>
        </p>
        <p>
            <input type="checkbox" name="keepintouch" value="Email">Email
            <input type="checkbox" name="keepintouch" value="Phone">Phone
            <input type="checkbox" name="keepintouch" value="Post">Post</p>
        <p>
            <input class="theButtons" type="submit" name="saveSubmit" value="Submit">
            <input class="theButtons" name="reset" type="reset" value="Clear form">
        </p>
    </fieldset>
</form>

JavaScript

function isChecked(chkbox) {
    var checked = false;
    for (var i = 0; i < chkbox.length; i++) {
        if (chkbox[i].type === 'checkbox' && chkbox[i].checked === true) {
            checked = true;
        }
    }
    if (checked === true) return true;
    else return false;
}

function doValidate() {
    //Require at least one checkbox to be checked for the "keepintouch" set of checkboxes
        var chkBoxSet2 = document.getElementsByName("keepintouch");
        var isDisChkd2 = isChecked(chkBoxSet2);
        if (isDisChkd2 === true) {
            for (var k = 0; k < chkBoxSet2.length; k++) {
                chkBoxSet2[k].setCustomValidity("");
            }
        } else {
            for (var l = 0; l < chkBoxSet2.length; l++) {
                chkBoxSet2[l].setCustomValidity("Please select at least one contact method");
            }
        }
    }

var cCheckboxes = document.getElementsByName("keepintouch");
for (var i = 0; i < cCheckboxes.length; i++) {
    cCheckboxes[i].onchange = doValidate;
}

document.getElementsByName("saveSubmit")[0].onclick = doValidate;