如何在引导程序中验证至少标记了一个复选框并将此信息传递给 php？
Posted
技术标签:
【中文标题】如何在引导程序中验证至少标记了一个复选框并将此信息传递给 php？【英文标题】：How can I validate in bootstrap that at least one checkbox is marked and pass this information to php? 【发布时间】：2015-12-17 08:05:07 【问题描述】：我正在使用引导程序，并创建了一个包含 8 个复选框的表单。当用户单击“提交”时，我想验证是否至少标记了一个复选框，如果没有 - 让用户知道复选框组下方的错误消息。 另外，我想用我的默认数据表单验证他输入的日期是否正确：23/09/2015 05:45 PM
这是我的 java 脚本验证代码：
$('#myform').validate(// initialize the plugin
errorElement: 'div',
rules:
datetimepicker:
required: true,
date: true
,
commercialText:
required: true,
minlength: 5
,
terms:
required: true,
maxlength: 2
,
submitHandler: function (form)
var text = $("#customtext").val();
var date = $("#datetimepicker").val();
var stand = 2;
$.ajax(
url: 'savedatanow.php',
type: "POST",
data:
text: text,
date: date,
stand: stand
,
dataType:'text',
success: function(response)
alert(response);
);
//alert('outside ajax');
,
highlight: function (element)
$(element).closest('.form-group').removeClass('success').addClass('has-error');
,
success: function (element)
element.addClass('valid')
.closest('.form-group').removeClass('error').addClass('has-success');
);
我准备了以下小提琴：http://jsfiddle.net/5WMff/1316/，但我无法将正确的错误消息标记为红色。当用户不检查他是否接受这些条款时，也会发生奇怪的情况（整个文本都标记为红色，不仅是错误）......你能帮我吗？ 谢谢！
【问题讨论】：
【参考方案1】：为一组元素创建自定义验证器。
$.validator.addMethod( "at_least_one", function()
return $( "input[name='number[]']:checked" ).length;
, 'Select at least one number' );
添加规则。
rules:
"number[]": "at_least_one",
.....
为复选框添加名称和值属性，这里是一个示例，说明如何为复选框名称创建带有方括号的选定值数组。这样$_POST['number'] 将是一个检查值数组。
<input type="checkbox" value="two" name="number[]">
UPDATED FIDDLE
对于日期你可以使用jQuery Datepicker 或THIS SO 问题，基本上创建另一个自定义验证方法。
现在，错误消息和引导程序仍然存在一些问题， 我希望其他人会帮助你。
【讨论】：
谢谢。为什么选择新号码被添加为新复选框？【参考方案2】：您可以将复选框数组命名为任何有意义的名称（我使用 number[] 作为通用示例），然后像往常一样添加您的规则和/或消息。
您可以使用自定义 errorPlacement 规则在适当的地方添加消息。复选框数组的目标 div 位于您的 html (<div id="checkboxGroup"></div>) 中。
请参阅文档：jQuery Validate
$('#myform').validate(
rules:
datetimepicker:
required: true,
date: true
,
commercialText:
required: true,
minlength: 5
,
terms:
required: true,
minlength: 1
,
'number[]':
required: true,
minlength: 1,
maxlength: 2
,
messages:
datetimepicker:
required: "Please enter a date."
,
commercialText:
required: "Please enter your message."
,
terms:
required: "Please agree to terms."
,
'audit[]':
required: "Please check at least 1 option.",
minlength: "Please check at least 0 option."
,
submitHandler: function(form)
var text = $("#customtext").val();
var date = $("#datetimepicker").val();
var stand = 2;
$.ajax(
url: 'savedatanow.php',
type: "POST",
data:
text: text,
date: date,
stand: stand
,
dataType: 'text',
success: function(response)
alert(response);
);
//alert('outside ajax');
,
highlight: function(element)
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
,
unhighlight: function(element)
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
,
errorClass: 'help-block',
errorPlacement: function(error, element)
if (element.parent('.form-group').length)
error.insertAfter(element.parent());
else
error.insertAfter(element.parent());
if (element.attr('name') == 'number[]')
error.insertAfter('#checkboxGroup');
else
error.appendTo(element.parent().next());
);#myform .has-error .help-block
display: block;
border: none;
color: #737373;
padding-top: 5px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.min.js"></script>
<div class="container">
<form role="form" id="myform">
<div class="form-group">
<label>what is your number?</label>
<div class="col-lg-12">
<div class="col-lg-6">
<div class="checkbox">
<label>
<input name="number[]" type="checkbox" value="">one</label>
</div>
<div class="checkbox">
<label>
<input name="number[]" type="checkbox" value="">two</label>
</div>
<div class="checkbox">
<label>
<input name="number[]" type="checkbox" value="">three</label>
</div>
<div class="checkbox">
<label>
<input name="number[]" type="checkbox" value="">four</label>
</div>
</div>
<div class="col-lg-6">
<div class="checkbox">
<label>
<input name="number[]" type="checkbox" value="">five</label>
</div>
<div class="checkbox">
<label>
<input name="number[]" type="checkbox" value="">six</label>
</div>
<div class="checkbox">
<label>
<input name="number[]" type="checkbox" value="">seven</label>
</div>
<div class="checkbox">
<label>
<input name="number[]" type="checkbox" value="">eight</label>
</div>
</div>
</div>
<div id="checkboxGroup"></div>
</div>
<div class="form-group">
<label for="datetimepicker">When do you want to go?</label>
<input type="text" class="form-control" id="datetimepicker" name="datetimepicker" />
</div>
<div class="form-group">
<label>How long will it last?</label>
<select class="form-control">
<option>5 seconds</option>
<option>10 seconds</option>
<option>15 seconds</option>
<option>20 seconds</option>
<option>30 seconds</option>
</select>
</div>
<div class="form-group">
<label for="commercialText">Write a text that:</label>
<textarea class="form-control" rows="3" id="commercialText" name="commercialText" placeholder="hello"></textarea>
</div>
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" id="terms" name="terms">I accept the terms</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>【讨论】：
以上是关于如何在引导程序中验证至少标记了一个复选框并将此信息传递给 php？的主要内容，如果未能解决你的问题，请参考以下文章