Question

是否可以验证以下复选框？

<form name="rmn-form" id="rmn-form" action="send.php" enctype="multipart/form-data" method="POST">
  <div class="row">
    <div class="col-md-12 col-xs-12">
      <div class="rmn-input-field">
        <label for="gdpr" class="checkbox-container"> Accept terms and conditions
          <input type="checkbox" checked="checked" id="gdpr" name="gdpr">
          <span class="checkmark"></span>
        </label>
      </div>
    </div>
  </div>

  <button type="submit" name="submit" id="submit-all" class="waves-effect waves-light btn submit-button pink mt-30">Send</button>
</form>

该复选框由https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

生成

我的Bootstrap库和jquery.validate.min.js包含以下JSFiddle代码： http://jsfiddle.net/2837qdeu/

Answer 1

只需将输入标签更改为下面的代码

<input type="checkbox" required="required" id="gdpr" name="gdpr">

它将在提交前检查必须选中此复选框。

Fiddle

Answer 2

您也可以自己控制此操作，如下所示：

 $("[name=submit]").click(function(){
    if ( $('#gdpr').is(':checked') ){
        alert('submit will proceed - checkbox is checked') //This alert not required, only added for demo
    }else{
        alert('Error - submit will not proceed');
        return false; //<== Here is the magic, along with checking that the box is checked
    }
 });

Revised jsFiddle

return false将停止提交过程，允许您在向用户返回控制权之前显示一条消息或执行一些js向导。

Answer 3

我在js文件中添加了以下行，并且效果很好：

$("#rmn-form").validate({
    ignore: ':hidden:not(:checkbox)',
    ....
});

jQuery验证自定义CSS复选框

3 个答案: