Question

再一次，新手JS又回来了一个问题。我希望在我的表单末尾有一个确认复选框，然后允许用户向我发送他们的详细信息，如果没有勾选，那么他们就无法提交表单。我已经看过这里并尝试使用不同的编码示例，但我发现在查看10或20页不同代码之后，这一切都非常令人困惑。这是我到目前为止所写的内容，从我可以看出我的表单只是跳过我的复选框验证代码，这显然是我不想发生的事情：

<head>
<script>
function validate (){
  send = document.getElementById("confirm").value;

  errors = "";

  if (send.checked == false){
    errors += "Please tick the checkbox as confirmation your details are correct \n";
    } else if (errors == ""){
      alert ("Your details are being sent)
    } else {
        alert(errors);
    }  
  }
</script>
</head>

<body>
  <div>      
    <label for="confirm" class="fixedwidth">Yes I confirm all my details are correct</label>
    <input type="checkbox" name="confirm" id="confirm"/>
  </div>
  <div class="button">
    <input type="submit" value="SUBMIT" onclick="validate()"/>
  </div>

Answer 1

我会根据复选框状态启用/禁用您的按钮。在按钮上添加ID，（我假装提交按钮的ID为btnSubmit）

document.getElementById("confirm").onchange = function() {
    document.getElementById("btnSubmit").disabled = !this.checked;
}

演示：http://jsfiddle.net/tymeJV/hQ8hF/1

Answer 2

您使send成为confirm的价值。

send = document.getElementById("confirm").value;

这样send.checked无效。因为您试图从值（可能是字符串）中获取属性checked。

要正确使用，请尝试以下方法：

send = document.getElementById("confirm");
sendValue = send.value;
sendCheck = send.checked;

然后你可以用

进行测试

if (sendCheck == false){ //sendCheck  evaluate true if checkbox is checked, false if not.

在错误提醒后停止提交表单return false;。

此处完整代码 - 已更新，无法正常使用（考虑到<form>代码标识为tesForm）：

 document.getElementById("testForm").onsubmit = function () {
    var send = document.getElementById("confirm"),
        sendValue = send.value,
        sendCheck = send.checked,
        errors = "";

    //validate checkbox
    if (!sendCheck) {
        errors += "Please tick the checkbox as confirmation your details are correct \n";
    }


    //validate other stuff here




    //in case you added more error types above
    //stacked all errors and in the end, show them
    if (errors != "") {
        alert(errors);
        return false; //if return, below code will not run
    }

    //passed all validations, then it's ok
    alert("Your details are being sent"); // <- had a missing " after sent.
    return true; //will submit
}

小提琴：http://jsfiddle.net/RaphaelDDL/gHNAf/

Answer 3

您不需要JavaScript即可执行此操作。 All modern browsers内置了本机表单验证。如果将复选框标记为必需，则除非选中该表单，否则不会提交表单。

<form>
  <input type="checkbox" required=""/>
  <button type="submit">Done</button>
</form>

在允许提交表单之前，如何确认我的确认复选框已勾选

3 个答案: