Проверка формы jquery не работает с флажком

$(document).ready(function () {
$('#msg_opportunities_form').validate({
  rules: {
    text_message: {
      required: true,
      maxlength: 400
    },
    temrs_and_condp: {
      required: true
    }
  },
  messages: {
    text_message: {
      required: "Please enter Announcement Title",
      maxlength: "Your Announcement Title must consist of at most 400 characters"
    },
    temrs_and_condp: "Please accept our terms"
  },
  errorElement: "em",
  errorPlacement: function(error, element) {
    // Add the `help-block` class to the error element
    error.addClass("help-block");

    if (element.prop("type") === "checkbox") {
      error.insertAfter(element.parent("p"));
    } else {
      error.insertAfter(element);
    }
  },
  highlight: function(element, errorClass, validClass) {
    $(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success");
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error");
  }
});
$('#msg_opportunities_form').submit(function(event) {

   console.info($(this).find(':input'));


  if ($('#msg_opportunities_form').valid()) {
    return true;
  } else {
    event.preventDefault();
  }
});
});
.userSentInfo img {width: 97px;height: 97px;object-fit: cover;border-radius: 50%;}
.userSentDetials span {font-size: 20px;}
.sendMessage h3 {font-family:'louis_george_cafebold';}
textarea.sendMsgHere { border: 1px solid #acacac; height: 358px; resize: none; border-bottom: 0px;
    margin-bottom: 0;}
.sumitBtnBox {position: relative;width: 100%;bottom:5px;background: #fff;padding: 0 18px;height: 60px;margin: 0 auto;left: 0;
    right: 0;border-top: 1px solid #acacac;border-left: 1px solid #acacac;border-right:1px solid #acacac;
    border-bottom: 1px solid #acacac; }
button.bg-blue.sendMsgBtn {border: none;width: 100px; padding: 6px; font-size: 18px; transition: all 0.3s;}    
input#temrs_and_cond {display: none;}
.termsndcond + label { position: relative; font-size:16px; color: #605b5c; display: flex;		 align-items: center;} 
.col-md-12.px-0.d-flex.userSentInfo.align-items-center { margin-top: 25px;}
		
button.bg-blue.sendMsgBtn:hover { background: transparent; color: #2d68b2; border: 1px solid #2d68b2;} 
.col-md-8.sndMsgBox.col-12 { margin-top: 100px;}
.sndMsgBox div {color: #595959;font-size: 24px;letter-spacing: 0px;}
.sndMsgBox hr { margin: 34px auto; border-top: 1px solid #a8a8a8;}
.sndMsgBox  h3 {font-family:'louis_george_cafebold'; font-size: 24px;}
.sndMsgBox div div { margin-bottom: 10px;}
.sndMsgBox div strong {font-family:'louis_george_cafebold';}
.ads-block { margin-bottom: 40px;}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.js"></script>
<form method = "POST" action = "{{url('/')}}/{{Request::path()}}" id = "msg_opportunities_form" class = "inline-form" enctype = "multipart/form-data">

  <h3 class = "text-color-blue">Send Message </h3>
  <textarea class = "sendMsgHere" name = "text_message" placeholder = "Type Here"></textarea>

  <p class = "checkbox sumitBtnBox d-flex justify-content-between align-items-center">
    <input name = "temrs_and_condp" type = "checkbox" value = "1" id = "temrs_and_cond" class = "termsndcond">
    <label for = "temrs_and_cond"> I agree to <a href = "{{ url('/') }}/terms" class = "color-blue">Terms & Conditions</a> </label>
  </p>
  <button class = "bg-blue sendMsgBtn" type = "submit"> Send</button>

</form>

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

заранее спасибо

вы хотите, чтобы обязательный флажок перед отправкой? Я попробовал, и он отлично работает

Beginner 25.02.2019 09:08

работает нормально. мой код?

Gaurav Gupta 25.02.2019 09:10

да, он проверяет правильно, как и должно быть

Beginner 25.02.2019 09:11

это проверка флажка или нет? потому что я не могу найти сообщение об ошибке в моей системе

Gaurav Gupta 25.02.2019 09:12

да, это в вашем фрагменте кода, просто попробуйте поместить console.info($(this).find(':input')); внутрьif ($('#msg_opportunities_form').valid()) {, чтобы вы могли проверить это здесь, во фрагменте кода

Beginner 25.02.2019 09:13

так почему ошибка msq не печатается

Gaurav Gupta 25.02.2019 09:15

Давайте продолжить обсуждение в чате.

Gaurav Gupta 25.02.2019 09:15

просто удалите console.info($(this).find(':input')); в обработчике .submit. Тогда ты в безопасности.

KarelG 25.02.2019 09:21
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
8
95
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Для этого вам нужно использовать селектор :checked. обратитесь к следующему коду:

$('#form1').submit(function() {
    if $('input:radio', this).is(':checked') {
    } else {
        alert('Please agree to terms and conditions!');
        return false;
    }
});

нужно сделать это с проверкой формы jquery

Gaurav Gupta 25.02.2019 09:07
Ответ принят как подходящий

в моем коде есть две проблемы: сначала журнал консоли, просто удалите его для фрагмента. тогда работает нормально во-вторых, основная проблема, которую я забыл написать, - это файл css (сейчас вопрос обновлен) мой дизайнер поставил галочку на

display none

что приводит к беспорядку в дырах, просто удаляем, и каждый раз волшебным образом вместо отображения никто не использует это:

opacity: 0;position: absolute;

надеюсь, это сработает и для вас, ребята

Другие вопросы по теме