如何在发送表单之前使用 javascript 验证基于 javascript 的表单复选框

Question

您好，我的网站上有一个联系表格，在这个表格中我有一个 javascript 复选框按钮。

这是我的表单的结束代码：这个 div 标签是我的复选框：

<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>

这是 javascript 文本按钮：

<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>

我还对其他表单元素使用 spry 验证。 我想用 javascript 验证复选框以创建验证码复选框！ 是否可以让弹出验证按摩而不干扰快速验证？！ 重要的是，如果关闭了 javascript，表单将无法再提交。

希望有人可以帮助我。非常感谢您的时间！

我正在尝试完成这个：http://uxmovement.com/forms/captchas-vs-spambots-why-the-checkbox-captcha-wins/

spry验证的sn-p：

<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

你可以试试这个代码

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>

Answer 2

在创建元素后为复选框提供一个 ID

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

现在，您可以使用document.getElementById('mycheckbox') 选择元素并对其进行验证。

这是一个验证复选框的sn-p

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
};

更新 1：

尚未测试，但应该可以工作

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;
}