onSubmit test case

onSubmit test case

by Jim Adamson

HTML

<form name="disabilities_form" method="POST">
    <h1>onSubmit test case</h1>
    <p>Two clicks of the submit button are required to invoke the error bubble. Why is this?</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() {
        var checksPassed = true;
        //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");
            }
            return false;
             }
        return true;
    }

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

document.getElementsByName("disabilities_form")[0].onsubmit = doValidate;