MAGETWO-57683: [Backport] Checkout Agreement validation is broken on payment method change #6224

Author: svitja

app/code/Magento/CheckoutAgreements/view/frontend/web/js/model/agreement-validator.js

@@ -12,9 +12,8 @@ define(
     function ($) {
         'use strict';
         var checkoutConfig = window.checkoutConfig,
-            agreementsConfig = checkoutConfig ? checkoutConfig.checkoutAgreements : {};
-
-        var agreementsInputPath = '.payment-method._active div.checkout-agreements input';
+            agreementsConfig = checkoutConfig ? checkoutConfig.checkoutAgreements : {},
+            agreementsInputPath = '.payment-method._active div.checkout-agreements input';
 
         return {
             /**
@@ -23,26 +22,11 @@ define(
              * @returns {boolean}
              */
             validate: function() {
-                if (!agreementsConfig.isEnabled) {
-                    return true;
-                }
-
-                if ($(agreementsInputPath).length == 0) {
+                if (!agreementsConfig.isEnabled || $(agreementsInputPath).length == 0) {
                     return true;
                 }
 
-                return $('#co-payment-form').validate({
-                    errorClass: 'mage-error',
-                    errorElement: 'div',
-                    meta: 'validate',
-                    errorPlacement: function (error, element) {
-                        var errorPlacement = element;
-                        if (element.is(':checkbox') || element.is(':radio')) {
-                            errorPlacement = element.siblings('label').last();
-                        }
-                        errorPlacement.after(error);
-                    }
-                }).element(agreementsInputPath);
+                return $.validator.validateSingleElement(agreementsInputPath, {errorElement: 'div'});
             }
         }
     }

app/code/Magento/CheckoutAgreements/view/frontend/web/template/checkout/checkout-agreements.html

@@ -8,14 +8,13 @@
     <div class="checkout-agreements" data-bind="visible: isVisible">
         <!-- ko foreach: agreements -->
             <!-- ko if: ($parent.isAgreementRequired($data)) -->
-            <div class="checkout-agreement">
-                <input type="checkbox"
+            <div class="checkout-agreement required">
+                <input type="checkbox" class="required-entry"
                        data-bind="attr: {
                                     'id': 'agreement_' + agreementId,
                                     'name': 'agreement[' + agreementId + ']',
                                     'value': agreementId
-                                    }"
-                       data-validate="{required:true}" />
+                                    }"/>
                 <label data-bind="attr: {'for': 'agreement_' + agreementId}">
                     <button type="button"
                             class="action action-show"

lib/web/mage/validation.js

@@ -1441,17 +1441,19 @@
      * Validate single element.
      *
      * @param {Element} element
+     * @param {Object} config
      * @returns {*}
      */
-    $.validator.validateSingleElement = function (element) {
+    $.validator.validateSingleElement = function (element, config) {
         var errors = {},
             valid = true,
             validateConfig = {
                 errorElement: 'label',
                 ignore: '.ignore-validate'
             },
-            form, validator, classes;
+            form, validator, classes, elementValue;
 
+        $.extend(validateConfig, config);
         element = $(element).not(validateConfig.ignore);
 
         if (!element.length) {
@@ -1475,7 +1477,11 @@
         validator.toShow = validator.toHide = $([]);
 
         $.each(classes, $.proxy(function (i, className) {
-            if (this.methods[className] && !this.methods[className](element.val(), element.get(0))) {
+            elementValue = element.val();
+            if (element.is(':checkbox') || element.is(':radio')) {
+                elementValue = element.is(':checked') || null;
+            }
+            if (this.methods[className] && !this.methods[className](elementValue, element.get(0))) {
                 valid = false;
                 errors[element.get(0).name] = this.messages[className];
                 validator.invalid[element.get(0).name] = true;