1

我已经构建了一个基本的联系表格，其中包括繁重的样式。为了不使用平淡无奇的默认复选框，我使用了指定的复选框字符。当您使用与默认复选框不同的复选框时，您需要隐藏原始复选框。当您执行此操作时，您因未选中具有“必需”属性的复选框而获得的反馈会随之消失。如果用户没有选中该框并按下提交按钮，则该表单不会提交，用户可能会想知道为什么。

我想一个简单的解决方案是使用一些 jquery。我对 jquery 或设计表单不太有经验，但通常我可以找到适合我情况的脚本。对于这个简单的任务，我找不到任何东西，所以我在这里。

这是我的代码。

另外，如果您想看看我正在使用什么，我会在http://www.vabugman.com/bootstrap上测试整个项目。

提前致谢！

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

		<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>

4

0 回答 0