How are the product options validated on the «Add to Cart» button click on a frontend product view?

dmitry_fedyuk · March 23, 2016, 10:12pm

magento/magento2/blob/4c437c3/app/code/Magento/Catalog/view/frontend/templates/product/view/addtocart.phtml#L32-L37


<button type="submit"
        title="<?php /* @escapeNotVerified */ echo $buttonTitle ?>"
        class="action primary tocart"
        id="product-addtocart-button">
    <span><?php /* @escapeNotVerified */ echo $buttonTitle ?></span>
</button>

github.com

magento/magento2/blob/4c437c3/app/code/Magento/Catalog/view/frontend/templates/product/view/addtocart.phtml#L44-L52


<script type="text/x-magento-init">
{
    "#product_addtocart_form": {
        "Magento_Catalog/product/view/validation": {
            "radioCheckboxClosest": ".nested"
        }
    }
}
</script>

github.com

magento/magento2/blob/4c437c3/app/code/Magento/Catalog/view/frontend/templates/product/view/addtocart.phtml#L55-L75


require([
    'jquery',
    'mage/mage',
    'Magento_Catalog/product/view/validation',
    'Magento_Catalog/js/catalog-add-to-cart'
], function ($) {
    'use strict';


    $('#product_addtocart_form').mage('validation', {
        radioCheckboxClosest: '.nested',
        submitHandler: function (form) {
            var widget = $(form).catalogAddToCart({
                bindSubmit: false
            });


            widget.catalogAddToCart('submitForm', $(form));


            return false;
        }
    });
});

github.com

magento/magento2/blob/4c437c3/lib/web/jquery/jquery.validate.js#L85-L99


// prevent submit for invalid forms or custom submit handlers
if (validator.cancelSubmit) {
    validator.cancelSubmit = false;
    return handle();
}
if (validator.form()) {
    if (validator.pendingRequest) {
        validator.formSubmitted = true;
        return false;
    }
    return handle();
} else {
    validator.focusInvalid();
    return false;
}

github.com

magento/magento2/blob/4c437c3/lib/web/jquery/jquery.validate.js#L358-L367


form: function () {
    this.checkForm();
    $.extend(this.submitted, this.errorMap);
    this.invalid = $.extend({}, this.errorMap);
    if (!this.valid()) {
        $(this.currentForm).triggerHandler("invalid-form", [this]);
    }
    this.showErrors();
    return this.valid();
},

github.com

magento/magento2/blob/4c437c3/lib/web/jquery/jquery.validate.js#L369-L375


checkForm: function () {
    this.prepareForm();
    for (var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++) {
        this.check(elements[i]);
    }
    return this.valid();
},

github.com

magento/magento2/blob/4c437c3/lib/web/jquery/jquery.validate.js#L544-L550


check: function (element) {
    element = this.validationTargetFor(this.clean(element));


    var rules = $(element).rules();
    var dependencyMismatch = false;
    var val = this.elementValue(element);
    var result;

github.com

magento/magento2/blob/4c437c3/lib/web/jquery/jquery.validate.js#L552-L556


for (var method in rules) {
    var rule = { method: method, parameters: rules[method] };
    try {


        result = $.validator.methods[method].call(this, val, element, rule.parameters);

github.com

magento/magento2/blob/4c437c3/lib/web/jquery/jquery.validate.js#L558-L574


// if a method indicates that the field is optional and therefore valid,
// don't mark it as valid when there are no other rules
if (result === "dependency-mismatch") {
    dependencyMismatch = true;
    continue;
}
dependencyMismatch = false;


if (result === "pending") {
    this.toHide = this.toHide.not(this.errorsFor(element));
    return;
}


if (!result) {
    this.formatAndAdd(element, rule);
    return false;
}