ran*_*er1 5 javascript php validation jquery twitter-bootstrap
我正在使用引导程序，并创建了具有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/，但是用红色标记正确的错误消息时遇到了问题。当用户不检查自己是否接受这些条款时，也会发生一种奇怪的情况（整个文本都标记为红色，不仅是错误）...您能帮我吗？谢谢！
为元素组创建自定义验证器。
$.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[]">
对于日期，您可以使用jQuery Datepicker或THIS SO question，基本上创建另一个自定义验证方法。
现在，错误消息和引导程序仍然存在一些问题，我希望其他人能帮助您。
您可以将复选框数组命名为任何有意义的名称（我用作number[]通用示例），然后照常添加您的规则和/或消息。
您可以使用自定义 errorPlacement 规则在适当的情况下添加消息。HTML 中的复选框数组有一个目标 div ( <div id="checkboxGroup"></div>)。
请参阅文档：jQuery 验证
$('#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>