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文件（問題現在更新）我的設計師把我的復選框放在

不顯示

這導致孔混亂只是刪除，然后每個人都神奇地代替顯示工作，沒有使用這個：

不透明度：0；位置：絕對；

希望它也適用於你們

Answer 2

為此，您必須使用 :checked 選擇器。 參考以下代碼：

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