如何在复选框中验证多个名称的复选框(BOOTSTRAP VALIDATOR USED)
how to validate checkbox with multiple names in checkbox (BOOTSTRAP VALIDATOR USED)
嗨,这里是html代码,你可以看到它在输入中有不同的名称,我想验证这个bootstrap js,这样至少一个复选框必须在表单提交之前被选中。下面将是我使用的javascript单选按钮,因为他们有相同的名称。谢谢你!'
<div class="form-group required">
<label class="col-md-2 control-label" required>Q2. Which event did you attend?</label>
<div class="col-md-4">
<div class="checkbox">
<label>
<input class="validateCheck" type="checkbox" name="Event_Mel" value="true" />Melbourne</label>
</div>
<div class="checkbox">
<label>
<input class="validateCheck" type="checkbox" name="Event_Syd" value="true" />Sydney</label>
</div>
<div class="checkbox">
<label>
<input class="validateCheck" type="checkbox" name="Event_Bri" value="true" />Brisbane</label>
</div>
<div class="checkbox">
<label>
<input class="validateCheck" type="checkbox" name="Event_Gol" value="true" />Gold Coast</label>
</div>
</div>
</div>`
$(document).ready(function() {
$('#contact_form').bootstrapValidator({
fields: {
comment: {
validators: {
stringLength: {
min: 5,
max: 200,
message: 'Please enter at least 5 characters and no more than 200'
},
notEmpty: {
message: 'Please supply your description'
}
}
},
RateLog: {
validators: {
notEmpty: {
message: 'Please select a value'
}
}
},
LikelyLog: {
validators: {
notEmpty: {
message: 'Please select a value'
}
}
},
EventLog: {
validators: {
notEmpty: {
message: 'Please select a value'
}
}
},
AdditionalFeed: {
validators: {
notEmpty: {
message: 'Please supply your feedback'
}
}
},
ProductTrial: {
validators: {
notEmpty: {
message: 'Please select a value'
}
}
}
}
})
$(document).ready(function() {
$('#contact_form')
.on('init.field.fv', function(e, data) {
// data.field --> The field name
// data.element --> The field element
if (data.field === 'checkEvents') {
var $parent = data.element.parents('.form-group'),
$icon = data.element.data('fv.icon');
$icon.appendTo('#feedbackIcon'); // <--- Move the icon to this element
}
})
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
validateCheck: {
selector: '.validateCheck',
err: '#message', // <---- All messages of checkEvents will be placed inside this element
validators: {
notEmpty: {
message: 'Please choose at least one checkbox'
}
}
}
}
});
});
相关文章:
- 潜水没有在Bootstrap/Javascript复选框菜单中排队
- Bootstrap多选-在复选框后添加图像
- Bootstrap使用复选框显示和隐藏id
- Bootstrap下拉菜单中的复选框允许多个复选框而不是一个
- 创建一个复选框按钮的散列,这些按钮在单击时在Twitter Bootstrap Button组中处于活动状态
- Bootstrap下拉菜单-仅复选框不选择文本
- React Bootstrap onClick触发器在复选框上累积(?)并执行多次
- 检测Bootstrap Switch Jquery中的类更改(将工作复选框JS转换为按钮JS)
- 复选框 Javascript 函数在 Bootstrap modal 中不起作用
- Bootstrap 3.2:当使用jQuery添加复选框时,它不会在正确的css上可见
- 使用Bootstrap Glyphicons创建复选框功能
- 我如何创建一个下拉菜单与标签的复选框列表使用bootstrap
- 在Twitter Bootstrap 3按钮(复选框)仍然是灰色后,它是未检查的
- 进度条的行为取决于复选框bootstrap + jquery
- 如何在复选框中验证多个名称的复选框(BOOTSTRAP VALIDATOR USED)
- Angular Bootstrap modal -复选框未绑定到控制器
- 单击按钮后,显示Popover Bootstrap并选中复选框
- BootStrap Modal + JS/AJAX 复选框表单提交
- 禁用 Bootstrap 中的复选框标签并将其灰显
- 当复选框被选中时,Twitter Bootstrap 3崩溃