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

dmitry_fedyuk · February 2, 2016, 6:01pm

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


  method="post">
<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 -->

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#L30-L30


email: checkoutData.getInputFieldEmailValue(),

github.com

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


emailHasChanged: function () {
    var self = this;


    clearTimeout(this.emailCheckTimeout);


    if (self.validateEmail()) {
        quote.guestEmail = self.email();
        checkoutData.setValidatedEmailValue(self.email());
    }
    this.emailCheckTimeout = setTimeout(function () {
        if (self.validateEmail()) {
            self.checkEmailAvailability();
        } else {
            self.isPasswordVisible(false);
        }
    }, self.checkDelay);


    checkoutData.setInputFieldEmailValue(self.email());
},

dmitry_fedyuk · February 2, 2016, 6:05pm