Simple Javascript Checkbox Validation

I usually work with PHP so sadly don't have some basic JS principles down. This is all I want to accomplish--I've seen many posts on this topic but they are usually beyond what I

Solution 1:

You could use:

if(!this.form.checkbox.checked)
{
    alert('You must agree to the terms first.');
    returnfalse;
}

(demo page).

<inputtype="checkbox" name="checkbox" value="check"  />
<inputtype="submit" name="email_submit" value="submit" onclick="if(!this.form.checkbox.checked){alert('You must agree to the terms first.');return false}"  />

• Returning false from an inline event handler will prevent the default action from taking place (in this case, submitting the form).
• ! is the Boolean NOT operator.
• this is the submit button because it is the element the event handler is attached to.
• .form is the form the submit button is in.
• .checkbox is the control named "checkbox" in that form.
• .checked is true if the checkbox is checked and false if the checkbox is unchecked.

Solution 2:

For now no jquery or php needed. Use just "required" HTML5 input attrbute like here

<form><p><inputclass="form-control"type="text"name="email" /><inputtype="submit"value="ok"class="btn btn-success"name="submit" /><inputtype="hidden"name="action"value="0" /></p><p><inputtype="checkbox"requiredname="terms">I have read and accept <ahref="#">SOMETHING Terms and Conditions</a></p></form>

This will validate and prevent any submit before checkbox is opt in. Language independent solution because its generated by users web browser.

Solution 3:

You can do something like this:

<formaction="../"onsubmit="return checkCheckBoxes(this);"><p><inputtype="CHECKBOX"name="MyCheckbox"value="This..."> This...</p><p><inputtype="SUBMIT"value="Submit!"></p></form><scripttype="text/javascript"language="JavaScript">
<!--
functioncheckCheckBoxes(theForm) {
    if (
    theForm.MyCheckbox.checked == false) 
    {
        alert ('You didn\'t choose any of the checkboxes!');
        returnfalse;
    } else {    
        returntrue;
    }
}
//--></script>

http://lab.artlung.com/validate-checkbox/

Although less legible imho, this can be done without a separate function definition like this:

<formaction="../"onsubmit="if (this.MyCheckbox.checked == false) { alert ('You didn\'t choose any of the checkboxes!'); return false; } else { return true; }"><p><inputtype="CHECKBOX"name="MyCheckbox"value="This..."> This...</p><p><inputtype="SUBMIT"value="Submit!"></p></form>

Solution 4:

You can do the following:

<form action="/" onsubmit="if(document.getElementById('agree').checked) { return true; } else { alert('please agree'); return false; }">
    <input type="checkbox" name="checkbox" value="check"id="agree" />
    <input type="submit" name="email_submit" value="submit" />
</form>​

Here is a working demo - http://jsfiddle.net/Ccr2x/

Solution 5:

var confirm=document.getElementById("confirm").value;
         if((confirm.checked==false)
         {
         alert("plz check the checkbox field");
         document.getElementbyId("confirm").focus();
         returnfalse;
         }