自定义复选框输入验证反馈

Question

我构建了一个基本的联系表格，其中包括重型造型。我使用了指定的复选框字符，以便不使用bland default复选框。当您使用与默认复选框不同的复选框时，您需要隐藏原始复选框。执行此操作时，如果不选中带有“required”属性的复选框，则会收到反馈。如果用户没有选中该框并按下提交按钮，则表单未提交，用户可能会想知道原因。

我认为一个简单的解决方案是使用一些jquery。我对jquery或设计表单不太熟悉，但通常我可以找到适合我情况的脚本。我找不到这个简单任务的任何内容，所以我在这里。

这是我的代码。

另外，如果您希望了解我正在使用的内容，我可以在http://www.vabugman.com/bootstrap进行整个项目的测试。

提前致谢！

我删除了尽可能多的无用的div和css，这与我的帖子无关，虽然我确实包含了一些jquery，它在我项目的另一部分用于平滑滚动，因为我不确定它是否是问题的一部分。 / p>

		<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
		<script src="js/bootstrap.js"></script>
		<script>
			$(function() {
			  $('a[href*="#"]:not([href="#"])').click(function() {
				if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
				  var target = $(this.hash);
				  target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
				  if (target.length) {
					$('html, body').animate({
					  scrollTop: target.offset().top
					}, 1000);
					return false;
				  }
				}
			  });
			});
		    $(function () {
				$('#contactform').terms(function () {

					var fields = $("input[name='terms']").serializeArray();
					if (fields.length == 0) {
						//alert('nothing selected');
						$("#myText").html("Selected");
					}
					else {
						//alert(fields.length + " items selected");
						$("#myText").html("Not Selected");
					}

				});
			});
		</script>

input[type="checkbox"]:required {
display: none;
}
input[type="checkbox"]:required:invalid + label:before {
content: "\2610";
font-size: 1.6em;
color: white;
}
input[type="checkbox"]:required:valid + label:before {
content: "\2611";
font-size: 1.6em;
color: #e51b23;
}

<form role="form" id="contactform" class="form-horizontal" onsubmit="return checkForm(this);" action="contact.php" method="post">
  <fieldset class="">
    <!-- Contact Form -->
    <legend class="formlegend">
      <h1><span class="glyphicon glyphicon-comment"></span>Free Quote</h1>
    </legend>
    <!-- First Name input-->
    <div class="form-group">
      <label class="control-label" for="textinput"></label>
      <input id="textinput" name="firstname" type="text" placeholder="First Name" required="">
    </div>
    <!-- Last Name input-->
    <div>
      <label class="control-label" for=""></label>
      <input id="" name="lastname" type="text" placeholder="Last Name" class="form-control input-lg" required="">
    </div>
    <!-- Phone input-->
    <div>
      <label class="control-label" for=""></label>
      <input id="" name="phone" type="text" placeholder="Phone" class="form-control input-lg input-block-level" required="">
    </div>
    <!-- Email input-->
    <div>
      <label class="control-label" for=""></label>
      <input id="" name="email" type="text" placeholder="E-mail" class="form-control input-lg" required="">
    </div>
    <!-- Comments -->
    <div>
      <label class="control-label" for=""></label>
      <textarea class="form-control formtextarea" id="" name="comments" placeholder="Comments"></textarea>
    </div>
    <!-- Agree Checkbox -->
    <div class="checkbox text-center">
      <input class="text-center" id="terms" type="checkbox" required="" name="terms">
      <label class="text-center" style="padding-left:0px;" for="terms">
        Yes, I give fksdlfj Pest Control LLC permission to contact me.
      </label>
      <div id="myText"><mark style="color:red">this is where i want user feed-back!!!!</mark></div>
    </div>
    <!-- Send Button -->
    <div class="col-sm-5 col-sm-offset-1 col-md-5  col-lg-3 col-lg-offset-2 padding">
      <label class="control-label center-block" for=""></label>
      <button name="sendbutton" class="btn btn-button-contact center-block"><span>&nbsp;</span><b>Send for a quote</b></button>
    </div>
  </fieldset>
</form>