1

新手 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>
4

3 回答 3

2

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

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

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

于 2013-09-05T17:40:56.280 回答
0

你正在创造sendbeconfirm的价值。

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>标签有 id 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/

于 2013-09-05T17:39:38.863 回答
0

您不需要 javascript 来执行此操作。所有现代浏览器都内置了本机表单验证。如果您将复选框标记为required，除非选中，否则表单将不会提交。

<form>
  <input type="checkbox" required=""/>
  <button type="submit">Done</button>
</form>
于 2018-10-30T22:06:55.383 回答