时间戳

首页 > 解决方案 > jQuery表单验证不适用于复选框

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

问题描述

$(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，但它没有验证复选框。我只需要在提交表单之前选中复选框。已经完成了太多的硬刷新，检查堆栈上的复选框，每个人都说只是把 required 设置为 true 但这对我不起作用不知道为什么这不起作用如果我在复选框上方或下方添加任何其他字段它们已经很好地工作了通过这个链接

提前致谢

标签： javascriptjqueryhtmllaravel-5

解决方案

我的代码中有两个问题首先是控制台日志，只需将其删除为片段即可。然后它工作正常第二个我忘记写的主要问题是css文件（问题现在更新）我的设计师把我的复选框放到

不显示

这会导致孔混乱被移除，然后每个都神奇地代替 display none 使用这个：

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

希望它也对你们有用

推荐阅读