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

Question

$(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.log($(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, но флажок не подтвержден.Мне просто нужно установить флажок перед отправкой формы.уже сделано слишком много жесткого обновления, проверьте в стеке флажок, который все говорят, просто поставьте обязательно с true, но это не работает для меня, не знаю, почему это не работает, если я добавляю любое другое поле выше или ниже флажка, они уже работают отличноперейдите по этой ссылке

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

Answer 1

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

display none

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

непрозрачность: 0; позиция: абсолютная;

надеюсь, что это будет работать длявы, ребята, тоже

Answer 2

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

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