Блог

Главная - Вопросы по программированию - флажок проверки jquery

флажок проверки jquery

#jquery

#jquery

Вопрос:

У меня есть форма следующим образом: вместо нажатия кнопки отправки приходит сообщение об успешной отправке, сообщение больше не отображается, и пользователь переходит на другой 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>

Комментарии:

1. Показанный вами код работает нормально, как вы можете видеть во фрагменте, который я отредактировал в ответ на ваш вопрос. Описанное вами поведение, при котором библиотеке проверки jQuery не удается остановить отправку стандартной формы, обычно возникает, когда в вашей логике проверки возникает ошибка, и отправка формы не отменяется. Проверьте консоль на наличие ошибок при отправке формы — не забудьте проверить опцию «сохранить журнал», в противном случае консоль будет очищена при загрузке новой страницы.

2. Рори Маккроссан привет, спасибо, но я хочу, чтобы пользователь вошел на другую страницу пользователя, подтвердив флажок. Если вы можете помочь, исправьте приведенный выше фрагмент кода для меня.

3. в вашем коде синтаксическая ошибка

Ответ №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>

Метки: