Javascript 文本字段有值时的复选框验证

Question

我正在尝试使用下面的代码。基本上，我需要的是在文本字段 (dateshipped) 不为空且未选中复选框 (close) 时发出警报。所以如果两者都是空的，表单可以提交，但是如果文本字段有值，并且复选框没有被选中，那么就会发出警报。警报应该有继续或取消的选项。

<script>
function validate() {
    var valid = true;
    var checkbox = document.getElementById('close').value;
    var text = document.getElementById('dateshipped').value;
    if(!(checkbox || text))
        valid = confirm("Checkbox isn't checked. \n Continue?");
    return valid;
}
</script>

我的表格：

<form id="form" name="form" method="post" onsubmit="return validate();">
<input type="checkbox" name="close" id="close" value="Yes"><label for="close" class="css-label-rma" title="Close this">Close this</label>
<input type="text" name="dateshipped" id="dateshipped" class="datefield" /></label>
<input type="submit" value="submit" />
</form>

这是 jsfiddle：http://jsfiddle.net/jvvu6vo0/

Answer 1

恐怕你有几个问题

1) onsubmit 是表单事件而不是 button 事件。你应该

<form id="form" name="form" method="post" onsubmit="return validate();">

2) 函数 validateSubmit 不存在。名字id validate

3) 您的提交按钮必须是 submit

类型

4) 你必须使用 checked 属性而不是 value

document.getElementById('close').checked;

Answer 2

您需要将按钮类型更改为 submit。
检查何时提交表单。
运行使用该检查的验证方法。

您的 validate 功能有一些错误。您应该检查 checkbox.checked 而不是 checkbox.value 并且您应该检查 text.

的字符串长度

This fiddle should work for you.

function validate() {
    var valid = true;
    var checkbox = document.getElementById('close');
    var text = document.getElementById('dateshipped').value;
    if( ! checkbox.checked || text.length)
        valid = confirm("Checkbox and text are empty. \n Continue?");
    return valid;
}

var form = document.getElementById('form');
form.onsubmit = function(e) {
    if ( ! validate()) {
        e.preventDefault(); // This will stop the form from submitting.
        return false;
    }

    alert('I am submitted.');
}

<form id="form" name="form" method="post">
<input type="checkbox" name="close" id="close" value="Yes"><label for="close" class="css-label-rma" title="Close this">Close this</label>
<input type="text" name="dateshipped" id="dateshipped" class="datefield" /></label>
<input type="submit" value="submit" />
</form>

Javascript 文本字段有值时的复选框验证

Javascript Checkbox Validation when Text Field has a value

html

javascript

checkbox