jquery form validation not working on checkbox

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

you want to required checkbox before submitting? I tried it and it works fine — Beginner
– Beginner, Commented Feb 25, 2019 at 8:08
it's validating checkbox or not ? because i can't find error msg in my system — Gaurav Gupta
– Gaurav Gupta, Commented Feb 25, 2019 at 8:12
just remove the console.log($(this).find(':input')); in the .submit handler. Then you're safe. — KarelG
– KarelG, Commented Feb 25, 2019 at 8:21

Gaurav Gupta · Accepted Answer · 2019-02-25 10:02:20Z

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

edited Feb 25, 2019 at 10:02

answered Feb 25, 2019 at 9:55

Gaurav Gupta

1,7332 gold badges16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Akshay Mulgavkar · Accepted Answer · 2019-02-25 08:05:54Z

0

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;
    }
});

answered Feb 25, 2019 at 8:05

Akshay Mulgavkar

1,77013 silver badges22 bronze badges

1 Comment

Gaurav Gupta Over a year ago

need to do it with jquery form validation

Collectives™ on Stack Overflow

jquery form validation not working on checkbox

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related