lundi 25 février 2019

jquery form validation not working on checkbox

$(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();
  }
});
});
<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="/" 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="/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



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire