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>

the above code is for jquery from validation but it did't validate checkbox. i just need to check check box is required before submitting form . already done too many hard refresh , check on stack for checkbox everyone say just put required with true but that not working for me don't know why this is not working if i add any other field above or below checkbox they are working perfectly fine already go through this link

thanks in advance

Answer 1

there are two problem's in my code first is console log just remove it for snippet . then it's work fine second the major problem which i forgot to write is css file (question is updated now) my designer put my check box to

display none

which cause the hole mess just remove and every then work magically in place of display none use this:

opacity: 0;position: absolute;

hope it will work for you guys too

Answer 2

To do this you have to use the :checked selector. refer following code:

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