Validating field with special name
← Examples
When using FormValidation with some server-side frameworks such as CakePHP, Symfony, Rails, Spring, etc, there is a relationship between the model name and the name attribute of input.
For example, assuming that an user is modeled by User class with firstName, lastName, username, emails[] properties.
Following the naming convention defined by these frameworks, the inputs in the form of adding new user might have the name attribute such as:
<input type="text" name="user[firstName]" />
<input type="text" name="user[lastName]" />
<input type="text" name="user[emails][]" />or
<input type="text" name="user.lastName" />
<input type="text" name="user.firstName" />
<input type="text" name="user.emails[]" />When using FormValidation to validate these kind of fields, you must wrap the field name between single or double quote as following:
$(form).formValidation({
framework: 'bootstrap',
fields: {
'user[firstName]': {
validators: {
...
}
},
'user[lastName]': {
validators: {
...
}
},
'user[emails][]': {
validators: {
...
}
}
}
});Below is a sample example:
<form id="userForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Full name</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="user[firstName]" placeholder="First name" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control" name="user[lastName]" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Username</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="user[username]" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Email address</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="user[email]" />
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-default">Add</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#userForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
'user[firstName]': {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
'user[lastName]': {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
'user[username]': {
validators: {
notEmpty: {
message: 'The username is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
'user[email]': {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
}
}
});
});
</script>