choice validator
Check if the number of checked boxes are less or more than a given number
Options
The validator also supports the select element if the multiple="multiple" attribute is set.
| Option | HTML attribute | Type | Description |
|---|---|---|---|
max | data-fv-choice-max | Number | The maximum number of check boxes required to be checked. It's a dynamic option |
message | data-fv-choice-message | String | The error message. The dynamic message is supported |
min | data-fv-choice-min | Number | The minimum number of check boxes required to be checked. It's a dynamic option |
At least one of min and max option is required.
When setting options via HTML attributes, remember to enable the validator by setting data-fv-choice="true".
The message and other options can be updated on the fly via the updateMessage() and updateOption() methods
Naming convention
In order to get the correct submit data in the server side, you should pay attention on setting the name attribute of checkbox/select elements.
| Server side | name attribute | Example |
|---|---|---|
| PHP | name[] | |
| Spring framework | name | |
Example
The following form asks a developer to choose 2-4 programming languages which he/she is good at:
<form id="interviewForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Programming Languages</label>
<div class="col-xs-6">
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="net" /> .Net
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="java" /> Java
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="c" /> C/C++
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="php" /> PHP
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="perl" /> Perl
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="ruby" /> Ruby
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="python" /> Python
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="javascript" /> Javascript
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Editors</label>
<div class="col-xs-6">
<select class="form-control" name="editors[]" multiple="multiple" style="height: 200px;">
<option value="" disabled="disabled">Choose 2 - 3 editors</option>
<option value="atom">Atom</option>
<option value="eclipse">Eclipse</option>
<option value="netbeen">NetBean</option>
<option value="nodepadplusplus">Nodepad++</option>
<option value="phpstorm">PHP Storm</option>
<option value="sublime">Sublime</option>
<option value="webstorm">Web Storm</option>
</select>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#interviewForm').formValidation({
framework: 'bootstrap',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
'languages[]': {
validators: {
choice: {
min: 2,
max: 4,
message: 'Please choose 2 - 4 programming languages you are good at'
}
}
},
'editors[]': {
validators: {
choice: {
min: 2,
max: 3,
message: 'Please choose 2 - 3 editors you use most'
}
}
}
}
});
});
</script><form id="interviewForm" class="form-horizontal"
data-fv-framework="bootstrap"
data-fv-icon-valid="glyphicon glyphicon-ok"
data-fv-icon-invalid="glyphicon glyphicon-remove"
data-fv-icon-validating="glyphicon glyphicon-refresh">
<!-- You only need to set the validator options for one of radio or checkbox elements -->
<div class="form-group">
<label class="col-xs-3 control-label">Programming Languages</label>
<div class="col-xs-6">
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="net"
data-fv-choice="true"
data-fv-choice-min="2"
data-fv-choice-max="4"
data-fv-choice-message="Please choose 2 - 4 programming languages you are good at" /> .Net
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="java" /> Java
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="c" /> C/C++
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="php" /> PHP
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="perl" /> Perl
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="ruby" /> Ruby
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="python" /> Python
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="javascript" /> Javascript
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Editors</label>
<div class="col-xs-6">
<select class="form-control" name="editors[]" multiple="multiple" style="height: 200px;"
data-fv-choice="true"
data-fv-choice-min="2"
data-fv-choice-max="3"
data-fv-choice-message="Please choose 2 - 3 editors you use most">
<option value="" disabled="disabled">Choose 2 - 3 editors</option>
<option value="atom">Atom</option>
<option value="eclipse">Eclipse</option>
<option value="netbeen">NetBean</option>
<option value="nodepadplusplus">Nodepad++</option>
<option value="phpstorm">PHP Storm</option>
<option value="sublime">Sublime</option>
<option value="webstorm">Web Storm</option>
</select>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#interviewForm').formValidation();
});
</script>