How does the checkout's email UI Component validate its value on a focus

dmitrii_fediuk · February 2, 2016, 5:39pm

The frontend checkout’s email UI Component validates the data entered on its focus.
See how it works:

magento/magento2/blob/c53d060/app/code/Magento/Checkout/view/frontend/web/template/form/element/email.html#L25


<fieldset id="customer-email-fieldset" class="fieldset" data-bind="blockLoader: isLoading">
    <div class="field required">
        <label class="label" for="customer-email">
            <span data-bind="i18n: 'Email Address'"></span>
        </label>
        <div class="control _with-tooltip">
            <input class="input-text"
                   type="email"
                   data-bind="
                        textInput: email,
                        hasFocus: emailFocused"
                   name="username"
                   data-validate="{required:true, 'validate-email':true}"
                   id="customer-email" />
            <!-- ko template: 'ui/form/element/helper/tooltip' --><!-- /ko -->
            <span class="note" data-bind="fadeVisible: isPasswordVisible() == false"><!-- ko i18n: 'You can create an account after checkout.'--><!-- /ko --></span>
        </div>
    </div>


    <!--Hidden fields -->
    <fieldset class="fieldset hidden-fields" data-bind="fadeVisible: isPasswordVisible">

github.com

magento/magento2/blob/c53d060/app/code/Magento/Checkout/view/frontend/web/js/view/form/element/email.js#L46-L56


/**
 * Initializes observable properties of instance
 *
 * @returns {Object} Chainable.
 */
initObservable: function () {
    this._super()
        .observe(['email', 'emailFocused', 'isLoading', 'isPasswordVisible']);


    return this;
},

github.com

magento/magento2/blob/c53d060/app/code/Magento/Checkout/view/frontend/web/js/view/form/element/email.js#L34-L37


listens: {
    email: 'emailHasChanged',
    emailFocused: 'validateEmail'
}

github.com

magento/magento2/blob/c53d060/app/code/Magento/Checkout/view/frontend/web/js/view/form/element/email.js#L120-L135


validateEmail: function (focused) {
    var loginFormSelector = 'form[data-role=email-with-possible-login]',
        usernameSelector = loginFormSelector + ' input[name=username]',
        loginForm = $(loginFormSelector),
        validator;


    loginForm.validation();


    if (focused === false && !!this.email()) {
        return !!$(usernameSelector).valid();
    }


    validator = loginForm.validate();


    return validator.check(usernameSelector);
},

dmitrii_fediuk · February 2, 2016, 5:48pm