Fork me on GitHub

Example: Basic email field creation

How to create a email field.

Basic EmailField creation

Use the following code to create a basic inputEx EmailField.

EmailField with MX correction

Use the following code to help people fix typos in MX:

EmailField rejecting disposable email addresses

Use the following code to reject disposable domains in your registration forms:

HTML

<div id="field-container"></div>

JavaScript

Implementation

YUI().use('inputex-email', function(Y) {

    // Example 1
    var field = new Y.inputEx.EmailField({parentEl: 'container1', showMsg: true });

    var logDiv = Y.inputEx.cn('div', null, null, "Log :");
    Y.one('#container1').appendChild(logDiv);
    field.on('updated', function(val) {
        logDiv.innerHTML += "Updated at "+(new Date())+" with value: "+val;
        logDiv.appendChild(Y.inputEx.cn('br'));
    });
    
    
    // Example 2
    var field2 = new Y.inputEx.EmailField({parentEl: 'container2', showMsg:true, fixdomain:true, description:"Try abc@gmail.co, abc@yaoo.fr..." });

    var logDiv2 = Y.inputEx.cn('div', null, null, "Log :");
    Y.one('#container2').appendChild(logDiv2);
    field2.on('updated', function(val) {
       logDiv2.innerHTML += "Updated at "+(new Date())+" with value: "+val;
       logDiv2.appendChild(Y.inputEx.cn('br'));
    });
    
    
    // Example 3
    var field3 = new Y.inputEx.EmailField({parentEl: 'container3', showMsg:true, disallowDisposable:true, description:"Try abc@trashmail.net, abc@tempomail.com..." });

    var logDiv3 = Y.inputEx.cn('div', null, null, "Log :");
    Y.one('#container3').appendChild(logDiv3);
    field3.on('updated', function(val) {
       logDiv3.innerHTML += "Updated at "+(new Date())+" with value: "+val;
       logDiv3.appendChild(Y.inputEx.cn('br'));
    });

});