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验证复选框以创建验证码复选框！是否可以弹出一个验证版本，而不是干扰spry验证？！重要的是，如果javascript被关闭，表单als就不能再提交了。

希望有人可以帮助我。非常适合你的时间！

我试图包含这个：http://uxmovement.com/forms/captchas-vs-spambots-why-the-checkbox-captcha-wins/

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

在创建元素

后为复选框提供ID

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

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

以下是验证复选框

的代码段

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

Answer 2

你可以试试这段代码

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>

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

2 个答案:

更新1：