Options
| Option | HTML attribute | Type | Description |
|---|---|---|---|
message | data-fv-emailaddress-message | String | The error message |
multiple | data-fv-emailaddress-multiple | String | Allow multiple email addresses, separated by a comma or semicolon. The default value is false |
separator | data-fv-emailaddress-separator | String | Regex for character or characters expected as separator between addresses. By default, it is /[,;]/, i.e. comma or semicolon |
When setting options via HTML attributes, remember to enable the validator by setting data-fv-emailaddress="true".
You don't need to do that when using HTML 5 type="email" attribute.
You don't need to do that when using HTML 5 type="email" attribute.
The message and other options can be updated on the fly via the updateMessage() and updateOption() methods
This validator passes an empty field since the field might be optional. If the field is required, then use the notEmpty validator.
You also can use the remote validator to connect and validate the email address on the server. The Using Mailgun API to validate email address example demonstrates how to do this.
Examples
Basic example
<form id="emailForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Email address</label>
<div class="col-xs-7">
<input type="text" class="form-control" name="email" />
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#emailForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
emailAddress: {
message: 'The value is not a valid email address'
}
}
}
}
});
});
</script><form id="emailForm" 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">
<div class="form-group">
<label class="col-xs-3 control-label">Email address</label>
<div class="col-xs-7">
<input type="text" class="form-control" name="email"
data-fv-emailaddress="true"
data-fv-emailaddress-message="The value is not a valid email address" />
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#emailForm').formValidation();
});
</script>HTML 5 example
The emailAddress validator will be enabled automatically when using HTML 5 type="email" attribute.
<form id="emailAddressHtml5Form" 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">
<div class="form-group">
<label class="col-xs-3 control-label">Email address</label>
<div class="col-xs-7">
<input class="form-control" name="email"
type="email"
data-fv-emailaddress-message="The value is not a valid email address" />
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#emailAddressHtml5Form').formValidation();
});
</script>Is a@b valid email address?
Yes! It's valid email address. If you want to treat these kind of email addresses as invalid one, you can use the regexp validator to define expression of email address.
The following example uses this approach and borrow the idea from Showing one message example to archive this.
<form id="regexpEmailForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Email address</label>
<div class="col-xs-7">
<input type="text" class="form-control" name="email" />
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#regexpEmailForm')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
emailAddress: {
message: 'The value is not a valid email address'
},
regexp: {
regexp: '^[^@\\s]+@([^@\\s]+\\.)+[^@\\s]+$',
message: 'The value is not a valid email address'
}
}
}
}
})
.on('err.validator.fv', function(e, data) {
// data.bv --> The FormValidation.Base instance
// data.field --> The field name
// data.element --> The field element
// data.validator --> The current validator name
if (data.field === 'email') {
// The email field is not valid
data.element
.data('fv.messages')
// Hide all the messages
.find('.help-block[data-fv-for="' + data.field + '"]').hide()
// Show only message associated with current validator
.filter('[data-fv-validator="' + data.validator + '"]').show();
}
});
});
</script>