[英]how to validate checkbox with multiple names in checkbox (BOOTSTRAP VALIDATOR USED)
您好这里是HTML代码,你可以看到它在输入不同的名字,我想,这样一个ATLEAST复选框的形式提交之前选择以验证此引导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'
}
}
}
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.