jquery - jquery 验证复选框

Question

我有一个如下表单，而不是按下提交按钮和消息表单成功提交，消息不再显示，用户转到另一个 url。就像批准网站的第一条规则一样

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>

$(document).ready(function() {
  $.validator.setDefaults({
    submitHandler: function() {
      alert("Form successful submitted!");
    }
  });
  
  $('#quickForm').validate({
    rules: {
      terms: {
        required: true
      },
    },
    messages: {
      terms: "  please tick cheakbax"
    },
    errorElement: 'span',
    errorPlacement: function(error, element) {
      error.addClass('invalid-feedback');
      element.closest('.form-group').append(error);
    },
    highlight: function(element, errorClass, validClass) {
      $(element).addClass('is-invalid');
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).removeClass('is-invalid');
    }
  });
});

<form role="form" id="quickForm" action="http://google.ca">
  <div class="card-body">
    <div class="form-group mb-0">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" name="terms" class="custom-control-input" id="exampleCheck1">
        <label class="custom-control-label" for="exampleCheck1"></label>   ok! thanks.</div>
    </div>
  </div>
  <div>
    <center><button type="submit" class="btn btn-success">open website</button></center>
  </div>
</form>

标签： jquery

Answer 1

  

$(document).ready(function() {
  $.validator.setDefaults({
    submitHandler: function() {
      alert("Form successful submitted!");
    }
  });
  
  $('#quickForm').validate({
    rules: {
      terms: {
        required: true
      },
    },
    messages: {
      terms: "  please tick cheakbax"
    },
    errorElement: 'span',
    errorPlacement: function(error, element) {
      error.addClass('invalid-feedback');
      element.closest('.form-group').append(error);
    },
    highlight: function(element, errorClass, validClass) {
      $(element).addClass('is-invalid');
    },
    unhighlight: function(element, errorClass, validClass) {
      $(element).removeClass('is-invalid');
    }
  });
});

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/additional-methods.min.js"></script>
<form role="form" id="quickForm" action="http://google.ca">
  <div class="card-body">
    <div class="form-group mb-0">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" name="terms" class="custom-control-input" id="exampleCheck1">
        <label class="custom-control-label" for="exampleCheck1"></label>   ok! thanks.</div>
    </div>
  </div>
  <div>
    <center><button type="submit" class="btn btn-success">open website</button></center>
  </div>
</form>