FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3

emailAddress validator

Validate an email address

Validators

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.
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>
Example