programer.tips, another cool thing from @nghuuphuoc!

emailAddress validator

Validate an email address

Validators

Improve it on Github

Options

Option HTML attribute Type Description
message data-bv-emailaddress-message String The error message
multiple data-bv-emailaddress-multiple String Allow multiple email addresses, separated by a comma or semicolon. The default value is false
separator data-bv-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-bv-emailaddress="true".
You don't need to do that when using HTML 5 type="email" attribute.
This validator passes an empty field since the field might be optional. If the field is required, then use the notEmpty validator.

Example

Email address Result
niceandsimple@example.com
very.common@example.com
a.little.lengthy.but.fine@dept.example.com
disposable.style.email.with+symbol@example.com
other.email-with-dash@example.com
"much.more unusual"@example.com
"very.unusual.@.unusual.com"@example.com
"very.(),:;<>[]\".VERY.\"very@\\ \"very\".unusual"@strange.example.com
admin@mailserver1
!#$%&'*+-/=?^_`{}|~@example.org
" "@example.org
üñîçøðé@example.com
üñîçøðé@üñîçøðé.com
Abc.example.com
A@b@c@example.com
a"b(c)d,e:f;gi[j\k]l@example.com
just"not"right@example.com
this is"not\allowed@example.com
this\ still\"not\\allowed@example.com
<form id="emailForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-3 control-label">Email address</label>
        <div class="col-sm-7">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>
</form>
$(document).ready(function() {
    $('#emailForm').bootstrapValidator({
        feedbackIcons: {
            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'
                    }
                }
            }
        }
    });
});
<form id="emailForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-3 control-label">Email address</label>
        <div class="col-lg-5">
            <input class="form-control" name="email"
                type="email"
                data-bv-emailaddress-message="The value is not a valid email address" />
        </div>
    </div>
</form>
$(document).ready(function() {
    $('#emailForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        }
    });
});