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设置为true，但对我却不起作用，如果我在复选框上方或下方添加任何其他字段，则它们工作正常，不知道为什么这不起作用已经通过了link

提前感谢

Answer 1

我的代码中有两个问题，首先是控制台日志，只需将其删除即可。那很好第二，我忘记写的主要问题是css文件（问题现在已更新）我的设计师将我的复选框放在

不显示

这会导致孔洞混乱，只需将其移除即可，然后魔术般地代替显示工作，不用此操作：

不透明度：0；位置：绝对；

希望它也对你们有用

Answer 2

为此，您必须使用：checked选择器。请参阅以下代码：

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

jQuery表单验证不适用于复选框

2 个答案: