简单的JavaScript复选框验证

Question

我通常使用PHP,所以很遗憾没有一些基本的JS原则.这就是我想要完成的任务 - 我已经看过很多关于这个主题的帖子,但它们通常超出我的需要.

这是我的表格:

 <input type="checkbox" name="checkbox" value="check"  />
 <input type="submit" name="email_submit" value="submit" onclick="----??----"  />

复选框是一个简单的"我同意".我希望按下提交按钮,只有选中该复选框才会提交.

事情是这样的:我想要简单,欺骗的方式 - 没有方法 - 只是那种形式的内联代码(假设它不会过长？).这不是一个公共页面,我只需要使用这种类型的验证快速而简单.如果未选中,则会抛出alert(); 如果它被检查它将通过邮件提交通过PHP并继续正常.

Answer 1

你可以使用:

 if(!this.form.checkbox.checked)
{
    alert('You must agree to the terms first.');
    return false;
}

(演示页面).

<input type="checkbox" name="checkbox" value="check"  />
<input type="submit" name="email_submit" value="submit" onclick="if(!this.form.checkbox.checked){alert('You must agree to the terms first.');return false}"  />

• false从内联事件处理程序返回将阻止发生默认操作(在这种情况下,提交表单).
• !是布尔NOT运算符.
• this 是提交按钮,因为它是事件处理程序附加到的元素.
• .form 是提交按钮所在的表单.
• .checkbox 是该窗体中名为"checkbox"的控件.
• .checked 如果选中该复选框,则为true;如果未选中该复选框,则为false.

Answer 2

现在不需要jquery或php.像这里使用"必需的"HTML5输入属性

 <form>
        <p>
            <input class="form-control" type="text" name="email" />
            <input type="submit" value="ok" class="btn btn-success" name="submit" />
            <input type="hidden" name="action" value="0" />
        </p>
        <p><input type="checkbox" required name="terms">I have read and accept <a href="#">SOMETHING Terms and Conditions</a></p>
 </form>

这将在复选框选择之前验证并阻止任何提交.语言无关的解决方案,因为它由用户Web浏览器生成.