我已经构建了一个基本的联系表格,其中包括繁重的样式。为了不使用平淡无奇的默认复选框,我使用了指定的复选框字符。当您使用与默认复选框不同的复选框时,您需要隐藏原始复选框。当您执行此操作时,您因未选中具有“必需”属性的复选框而获得的反馈会随之消失。如果用户没有选中该框并按下提交按钮,则该表单不会提交,用户可能会想知道为什么。
我想一个简单的解决方案是使用一些 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> </span><b>Send for a quote</b></button>
</div>
</fieldset>
</form>