提交表单检查，如果复选框已选中

Question

我使用带有“使用条款”复选框的注册表单

 <form action="/signup/signup_success.html" id="regform" class="form-horizontal" novalidate="novalidate" autocomplete="off">
  <fieldset>
  <div class="checkbox">
                        <label for="agb" id="checkbox_validate" class="hide success">Please accept Terms of Use</label>
                        <label>
                            <input type="checkbox" name="agbcheckbox" id="agbcheckbox">
                            Yes <a target="_blank" href="http://example.de">Datenschutzbestimmungen</a>. </label>
                    </div>
                    <div class="buttonWrapper">
                        <button type="submit" class="try-button" >
                            Register
                        </button>
                    </div>
    </fieldset>
</form>

<script>
 //check if checkbox for terms of use is checked or not
 $("#regform").submit(function(event) {
if ($('#agbcheckbox').prop('checked')) {
    $('#checkbox_validate').removeClass('show').addClass('hide');
    //checkbox for terms of use is checked
} else {
    //checkbox for terms of use is NOT checked
    $('#checkbox_validate').removeClass('hide').addClass('show');
}
  });
</script>

如果我在表单中添加“ action =“ / signup / signup_success.html”，则复选框验证将不再起作用。如果将action设置为action =”“，验证将正常工作。找不到问题。谢谢您的帮助！

Answer 1

这就是你所需要的

event.preventDefault();

http://jsfiddle.net/ergec/L8Y8s/

还建议阅读此内容以更好地了解event.preventDefault和return false之间的区别

event.preventDefault（）与返回false

Answer 2

发现了问题-我的函数错过了返回false的机会；

Answer 3

无论action ='...'是否存在，您的验证仍然有效。 区别在于，当您定义action ='...'时，浏览器将按照指示发布您的表单。 为防止验证失败时发生这种情况，请调用e.preventDefault（）

eg) $("#regform").submit(function(e){ if (.. validation failes ...) { .. do your error msg here e.preventDefault() // prevent browser to perform default action (in this case submit the form) } });