Validating array of inputs
← Examples
Inputs with same names
It's possible to validate multiple fields with the same name. The fields can be radio buttons, checkboxes or text boxes, etc.
<form id="multipleForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Gender</label>
<div class="col-xs-5">
<div class="radio">
<label>
<input type="radio" name="gender" value="male" /> Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female" /> Female
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="other" /> Other
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Browser</label>
<div class="col-xs-5">
<div class="checkbox">
<label>
<input type="checkbox" name="browsers[]" value="chrome" /> Google Chrome
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="browsers[]" value="firefox" /> Firefox
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="browsers[]" value="ie" /> IE
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="browsers[]" value="safari" /> Safari
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="browsers[]" value="opera" /> Opera
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="browsers[]" value="other" /> Other
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Editors</label>
<div class="col-xs-5">
<input class="form-control" type="text" name="editors[]" />
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-5">
<input class="form-control" type="text" name="editors[]" />
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-5">
<input class="form-control" type="text" name="editors[]" />
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-5">
<input class="form-control" type="text" name="editors[]" />
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#multipleForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
'browsers[]': {
validators: {
notEmpty: {
message: 'Please specify at least one browser you use daily for development'
}
}
},
'editors[]': {
validators: {
notEmpty: {
message: 'The editor names are required'
}
}
}
}
});
});
</script>Inputs with different names
In some server-side frameworks, there is relationship between the model layer and the name of inputs. The following form demonstrates a way of modelling and naming convention of inputs
For instance, a person profile might include the information of children. Each child has basic information such as full name and date of birth.
The Full name and Date of birth inputs are named as child[i].fullName, child[i].birthday respectively, where i can be 0, 1, ..., 4. These fields have different names but have the same set of validation rules. In this case, we can use the selector options to define the validators for list of fields having the same CSS selector.
<form id="profileForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Full name</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="fullName" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Email address</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Children</label>
<div class="col-xs-9">
<div class="form-group">
<div class="col-xs-6">
<input type="text" class="form-control childFullName" name="child[0].fullName" placeholder="Full name" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control childDob" name="child[0].dob" placeholder="Date of birth" />
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<input type="text" class="form-control childFullName" name="child[1].fullName" placeholder="Full name" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control childDob" name="child[1].dob" placeholder="Date of birth" />
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<input type="text" class="form-control childFullName" name="child[2].fullName" placeholder="Full name" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control childDob" name="child[2].dob" placeholder="Date of birth" />
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<input type="text" class="form-control childFullName" name="child[3].fullName" placeholder="Full name" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control childDob" name="child[3].dob" placeholder="Date of birth" />
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<input type="text" class="form-control childFullName" name="child[4].fullName" placeholder="Full name" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control childDob" name="child[4].dob" placeholder="Date of birth" />
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#profileForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fullName: {
validators: {
notEmpty: {
message: 'The full name is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The full name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The full name can only consist of alphabetical and spaces'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
childFullName: {
// The children's full name are inputs with class .childFullName
selector: '.childFullName',
// The field is placed inside .col-xs-6 div instead of .form-group
row: '.col-xs-6',
validators: {
stringLength: {
min: 6,
max: 30,
message: 'The full name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z\s]+$/,
message: 'The full name can only consist of alphabetical and spaces'
}
}
},
childDob: {
// The children's date of birth are inputs with class .childDob
selector: '.childDob',
// The field is placed inside .col-xs-4 div instead of .form-group
row: '.col-xs-4',
validators: {
date: {
format: 'YYYY-MM-DD',
message: 'The date of birth is not valid'
}
}
}
}
});
});
</script>