how can i make a javascript based form checkbox validate with javascript before sending my form

Question

Hi i have a contact form on my site, In this form i got a javascript checkbox button.

This is the end code of my form: this div tag is my checkbox:

<p><label for="agree">(*) I agree whit the transport terms and conditions:</label><div id="cb"></div></p>
<p>hi
<input name="Submit / Send" type="submit" class="submit" id="Submit / Send" tabindex="370" value="Submit / Send" />
<p id="error_zone" style="visibility:hidden;">Errors: There are some errors in the form. Please correct them.</p>
</p>

This is the javascript text button:

<script type="text/javascript">
    var cbh = document.getElementById('cb');
    var val = '1';
    var cap = '';

    var cb = document.createElement('input');
    cb.type = 'checkbox';
    cbh.appendChild(cb);
    cb.name = val;
    cb.value = cap;
    cbh.appendChild(document.createTextNode(cap));
</script>

also i make use of spry validation for my other form elements. I would like to validate the checkbox with javascript to create a captcha checkbox? Is it posible to let pop up a validation masage and and not disturbe the spry validation.! Its important that if javascript is turned off the form als can't submit any more.

Hope someone can help me. thanx alot for your time!

i'm trying to encomplish this: http://uxmovement.com/forms/captchas-vs-spambots-why-the-checkbox-captcha-wins/

snippet of spry validation:

<script type="text/javascript">
var errorsOnSubmit = function(form){
 var ret = Spry.Widget.Form.validate(form);
 var errorZone= document.getElementById('error_zone');
 if (!ret){
      errorZone.style.visibility = 'visible';
      errorZone.style.backgroundColor = 'red';
 }else{
      errorZone.style.visibility = 'hidden';
 }
 return ret;
}
</script>
<script type="text/javascript">
var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1", {isRequired:false,  invalidValue:"1", validateOn:["blur", "change"]});
var spryselect2 = new Spry.Widget.ValidationSelect("spryselect2", {isRequired:false, invalidValue:"1", validateOn:["blur", "change"]});
var spryselect3 = new Spry.Widget.ValidationSelect("spryselect3", {isRequired:false, invalidValue:"1", validateOn:["blur", "change"]});

Answer 1

Give an ID to the checkbox after you created the element

cb.type = 'checkbox';
cb.id = 'mycheckbox';
cbh.appendChild(cb);

Now, you can select the element using document.getElementById('mycheckbox') and the validate it.

Here is a snippet to validate the checkbox

var myform = document.forms("yourformname");
myform.onsubmit = function() {

    //validate the checkbox
    var checkb = document.getElementById('mycheckbox');
    if(checkb.checked != true) { 
       alert('not checked');
    }

    //rest of the validation
};

Update 1:

Haven't tested but should work

var errorsOnSubmit = function(form){

  //validate the checkbox
  var checkb = document.getElementById('mycheckbox');
  if(checkb.checked != true) { 
     alert('not checked');
  }

 var ret = Spry.Widget.Form.validate(form);
 var errorZone= document.getElementById('error_zone');
 if (!ret){
      errorZone.style.visibility = 'visible';
      errorZone.style.backgroundColor = 'red';
 }else{
      errorZone.style.visibility = 'hidden';
 }
 return ret;
}

Answer 2

u can try this code

function agree() {
if (document.getElementById("cb").checked){
alert("checked");
document.getElementById("Send").setAttribute(disabled,"false");
document.getElementById(seny).
}else{
alert("unchecked");
document.getElementById("Send").disabled="true";
}
}

<p>
            <input type="checkbox" id="cb" onclick="javascript:agree();">
            <label for="agree">
                (*) I agree whit the transport terms and conditions:
            </label>
        </p>
        <p id="seny">
            <input disabled="disabled" name="Send" type="submit" class="submit"
                id="Send" tabindex="370" value="Submit / Send" />
        </p>