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

Using Mailgun API to validate email address

ejemplos

Mailgun is one of most popular email services. It also provides free API to validate an email address based on:

  • Syntax checks
  • DNS validation
  • Spell checks
  • Email Service Provider (ESP)

The following example shows how to use the emailAddress validator to validate email address in the client side first. And then use the remote validator to connect with Mailgun validation API.

To use it, you need to sign up for a Mailgun account and get a free API key.

The crossDomain, dataType, validKey options of the remote validator used in the example are only available from v0.6.1
Email address Description Result
john@gmail.com Does not meet Gmail minimum local-part length of 6 characters
john.smith@gmaill.com Invalid, because gmaill.com does not have valid MX records
john@microsoft.io Invalid because while microsoft.io does not have any MX records, it does have fallback A records, but alas no Mail Exchanger responds
john.smith@gmail.com Meets Gmail 6 character minimum and all other requirements
"hello world"@domain.com Meets pure syntax checks
hello@gail.com Suggest new email address
<form id="emailForm" class="form-horizontal">
    <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="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: {
                    verbose: false,
                    validators: {
                        notEmpty: {
                            message: 'The email address is required and can\'t be empty'
                        },
                        emailAddress: {
                            message: 'The input is not a valid email address'
                        },
                        stringLength: {
                            max: 512,
                            message: 'Cannot exceed 512 characters'
                        },
                        remote: {
                            type: 'GET',
                            url: 'https://api.mailgun.net/v2/address/validate?callback=?',
                            crossDomain: true,
                            name: 'address',
                            data: {
                                // Registry a Mailgun account and get a free API key
                                // at https://mailgun.com/signup
                                api_key: 'pubkey-83a6-sl6j2m3daneyobi87b3-ksx3q29'
                            },
                            dataType: 'jsonp',
                            validKey: 'is_valid',
                            message: 'The email is not valid'
                        }
                    }
                }
            }
        })
        .on('success.validator.fv', function(e, data) {
            if (data.field === 'email' && data.validator === 'remote') {
                var response = data.result;  // response is the result returned by MailGun API
                if (response.did_you_mean) {
                    // Update the message
                    data.element                    // The field element
                        .data('fv.messages')        // The message container
                        .find('[data-fv-validator="remote"][data-fv-for="email"]')
                        .html('Did you mean ' + response.did_you_mean + '?')
                        .show();
                }
            }
        })
        .on('err.validator.fv', function(e, data) {
            if (data.field === 'email' && data.validator === 'remote') {
                var response = data.result;
                // We need to reset the error message
                data.element                // The field element
                    .data('fv.messages')    // The message container
                    .find('[data-fv-validator="remote"][data-fv-for="email"]')
                    .html(response.did_you_mean
                                ? 'Did you mean ' + response.did_you_mean + '?'
                                : 'The email is not valid')
                    .show();
            }
        });
});
</script>