[FIX] payment: improve invalid input management on payment form

The different fields weren't correctly checked on a payment form. This commit improve the error messages and display it for each field. It adds too a verification on the fields in the case of the field are filled automatically by Firefox on a refresh (F5).

2 files changed, 75 insertions, 53 deletions

diff --git a/addons/payment/static/src/js/payment_form.js b/addons/payment/static/src/js/payment_form.js
index dd643840e95..21a105da3fa 100644
--- a/addons/payment/static/src/js/payment_form.js
+++ b/addons/payment/static/src/js/payment_form.js
@@ -57,25 +57,29 @@ odoo.define('payment.payment_form', function (require) {
                         console.warn('payment_form: unset partner_id when adding new token; things could go wrong');
                     }
                     var form_data = this.getFormData(inputs_form);
-                    var empty_inputs = false;
+                    var wrong_input = false;
 
                     inputs_form.toArray().forEach(function (element) {
-                        if (element.dataset.isRequired) {
-                            if (element.value.length === 0) {
+                        //skip the check of non visible inputs
+                        if ($(element).attr('type') == 'hidden') {
+                            return true;
+                        }
+                        $(element).closest('div.form-group').removeClass('has-error');
+                        $(element).siblings( ".o_invalid_field" ).remove();
+                        //force check of forms validity (useful for Firefox that refill forms automatically on f5)
+                        $(element).trigger("focusout");
+                        if (element.dataset.isRequired && element.value.length === 0) {
                                 $(element).closest('div.form-group').addClass('has-error');
-                                empty_inputs = true;
-                            }
-                            else {
-                                $(element).closest('div.form-group').removeClass('has-error');
-                            }
+                                $(element).closest('div.form-group').append('<div style="color: red" class="o_invalid_field">' + _.str.escapeHTML("The value is invalid.") + '</div>');
+                                wrong_input = true;
+                        }
+                        else if ($(element).closest('div.form-group').hasClass('has-error')) {
+                            wrong_input = true;
+                            $(element).closest('div.form-group').append('<div style="color: red" class="o_invalid_field">' + _.str.escapeHTML("The value is invalid.") + '</div>');
                         }
                     });
 
-                    if (empty_inputs) {
-                        this.displayError(
-                            _t('Missing values'),
-                            _t('<p>Please fill all the inputs required.</p>')
-                        );
+                    if (wrong_input) {
                         return;
                     }
 
@@ -106,7 +110,7 @@ odoo.define('payment.payment_form', function (require) {
                         else {
                             self.displayError(
                                 _t('Server Error'),
-                                _t("<p>We are not able to add your payment method at the moment.</p>"));
+                                _t('e.g. Your credit card details are wrong. Please verify.'));
                         }
                         // here we remove the 'processing' icon from the 'add a new payment' button
                         $(button).attr('disabled', false);
@@ -118,10 +122,8 @@ odoo.define('payment.payment_form', function (require) {
 
                         self.displayError(
                             _t('Server Error'),
-                            _t("<p>We are not able to add your payment method at the moment.</p>") +
-                               "<p>" +
-                               (core.debug ? (data.data.message.replace(/\n/g, "<br />")): '') +
-                               "</p>"
+                            _t("We are not able to add your payment method at the moment.") +
+                               data.data.message
                         );
                     });
                 }
@@ -159,16 +161,14 @@ odoo.define('payment.payment_form', function (require) {
                             else {
                                 self.displayError(
                                     _t('Server Error'),
-                                    _t("<p>We are not able to redirect you to the payment form.</p>")
+                                    _t("We are not able to redirect you to the payment form.")
                                 );
                             }
                         }).fail(function (message, data) {
                             self.displayError(
                                 _t('Server Error'),
-                                _t("<p>We are not able to redirect you to the payment form.</p>") +
-                                   "<p>" +
-                                   (core.debug ? (data.data.message.replace(/\n/g, "<br />")): '') +
-                                   "</p>"
+                                _t("We are not able to redirect you to the payment form.<") +
+                                   data.data.message
                             );
                         });
                     }
@@ -176,7 +176,7 @@ odoo.define('payment.payment_form', function (require) {
                         // we append the form to the body and send it.
                         this.displayError(
                             _t("Cannot set-up the payment"),
-                            _t("<p>We're unable to process your payment.</p>")
+                            _t("We're unable to process your payment.")
                         );
                     }
                 }
@@ -187,7 +187,7 @@ odoo.define('payment.payment_form', function (require) {
             else {
                 this.displayError(
                     _t('No payment method selected'),
-                    _t('<p>Please select a payment method.</p>')
+                    _t('Please select a payment method.')
                 );
             }
         },
@@ -209,25 +209,31 @@ odoo.define('payment.payment_form', function (require) {
                 var inputs_form = $('input', acquirer_form);
                 var form_data = this.getFormData(inputs_form);
                 var ds = $('input[name="data_set"]', acquirer_form)[0];
-                var empty_inputs = false;
-
+                var wrong_input = false;
+                
                 inputs_form.toArray().forEach(function (element) {
-                    if (element.dataset.isRequired) {
-                        if (element.value.length === 0) {
+                    //skip the check of non visible inputs
+                    if ($(element).attr('type') == 'hidden') {
+                        return true;
+                    }
+                    $(element).closest('div.form-group').removeClass('has-error');
+                    $(element).siblings( ".o_invalid_field" ).remove();
+                    //force check of forms validity (useful for Firefox that refill forms automatically on f5)
+                    $(element).trigger("focusout");
+                    if (element.dataset.isRequired && element.value.length === 0) {
                             $(element).closest('div.form-group').addClass('has-error');
-                            empty_inputs = true;
-                        }
-                        else {
-                            $(element).closest('div.form-group').removeClass('has-error');
-                        }
+                            var message = '<div style="color: red" class="o_invalid_field">' + _.str.escapeHTML("The value is invalid.") + '</div>';
+                            $(element).closest('div.form-group').append(message);
+                            wrong_input = true;
+                    }
+                    else if ($(element).closest('div.form-group').hasClass('has-error')) {
+                        wrong_input = true;
+                        var message = '<div style="color: red" class="o_invalid_field">' + _.str.escapeHTML("The value is invalid.") + '</div>';
+                        $(element).closest('div.form-group').append(message);
                     }
                 });
 
-                if (empty_inputs) {
-                    this.displayError(
-                        _t('Missing values'),
-                        _t('<p>Please fill all the inputs required.</p>')
-                    );
+                if (wrong_input) {
                     return;
                 }
                 // We add a 'processing' icon into the 'add a new payment' button
@@ -274,17 +280,15 @@ odoo.define('payment.payment_form', function (require) {
 
                     self.displayError(
                         _t('Server error'),
-                        _t("<p>We are not able to add your payment method at the moment.</p>") +
-                           "<p>" +
-                           (core.debug ? (data.data.message.replace(/\n/g, "<br />")): '') +
-                           "</p>"
+                        _t("We are not able to add your payment method at the moment.</p>") +
+                           data.data.message
                     );
                 });
             }
             else {
                 this.displayError(
                     _t('No payment method selected'),
-                    _t('<p>Please select the option to add a new payment method.</p>')
+                    _t('Please select the option to add a new payment method.')
                 );
             }
         },
@@ -308,7 +312,7 @@ odoo.define('payment.payment_form', function (require) {
                     }, function () {
                         self.displayError(
                             _t('Server Error'),
-                            _t("<p>We are not able to delete your payment method at the moment.</p>")
+                            _t("We are not able to delete your payment method at the moment.")
                         );
                     });
             };
@@ -322,7 +326,7 @@ odoo.define('payment.payment_form', function (require) {
                     // if there's records linked to this payment method
                     var content = '';
                     result[pm_id].forEach(function (sub) {
-                        content += '<p><a href="' + sub.url + '" title="' + _.str.escapeHTML(sub.description) + '">' + _.str.escapeHTML(sub.name) + '</a><p/>';
+                        content += '<p><a href="' + sub.url + '" title="' + sub.description + '">' + sub.name + '</a><p/>';
                     });
 
                     content = $('<div>').html(_t('<p>This card is currently linked to the following records:<p/>') + content);
@@ -343,7 +347,7 @@ odoo.define('payment.payment_form', function (require) {
             }, function (type, err) {
                 self.displayError(
                     _t('Server Error'),
-                    _t("<p>We are not able to delete your payment method at the moment.</p>") + (core.debug ? err.data.message : '')
+                    _t("We are not able to delete your payment method at the moment.") + err.data.message
                 );
             });
         },
@@ -391,12 +395,27 @@ odoo.define('payment.payment_form', function (require) {
             return $(element).data('acquirer-id');
         },
         displayError: function (title, message) {
-            return new Dialog(null, {
-                title: _t('Error: ') + title,
-                size: 'medium',
-                $content: message || "",
-                buttons: [
-                {text: _t('Ok'), close: true}]}).open();
+            var $checkedRadio = this.$('input[type="radio"]:checked'),
+                acquirerID = this.getAcquirerIdFromRadio($checkedRadio[0]),
+                $acquirerForm = this.$('#o_payment_add_token_acq_' + acquirerID);
+
+            if ($checkedRadio.length === 0) {
+                return new Dialog(null, {
+                    title: _t('Error: ') + _.str.escapeHTML(title),
+                    size: 'medium',
+                    $content: "<p>" + (_.str.escapeHTML(message) || "") + "</p>" ,
+                    buttons: [
+                    {text: _t('Ok'), close: true}]}).open();
+            } else {
+                // removed if exist error message
+                this.$('#payment_error').remove();
+                var messageResult = '<div class="alert alert-danger mb4" id="payment_error">';
+                if (title != '') {
+                    messageResult = messageResult + '<b>' + _.str.escapeHTML(title) + ':</b></br>';
+                }
+                messageResult = messageResult + _.str.escapeHTML(message) + '</div>';
+                $acquirerForm.append(messageResult);
+            }
         },
         getFormData: function ($form) {
             var unindexed_array = $form.serializeArray();
diff --git a/addons/payment/static/src/js/payment_portal.js b/addons/payment/static/src/js/payment_portal.js
index d7397f1b04d..efab5f0a8e0 100644
--- a/addons/payment/static/src/js/payment_portal.js
+++ b/addons/payment/static/src/js/payment_portal.js
@@ -17,6 +17,7 @@ $(document).ready(function () {
         if (valid_value) {
             $(this).parent('.form-group').addClass('has-success');
             $(this).parent('.form-group').removeClass('has-error');
+            $(this).siblings('.o_invalid_field').remove();
         }
         else {
             $(this).parent('.form-group').addClass('has-error');
@@ -31,6 +32,7 @@ $(document).ready(function () {
         if (valid_value) {
             $(this).parent('.form-group').addClass('has-success');
             $(this).parent('.form-group').removeClass('has-error');
+            $(this).siblings('.o_invalid_field').remove();
         }
         else {
             $(this).parent('.form-group').addClass('has-error');
@@ -46,6 +48,7 @@ $(document).ready(function () {
         if (valid_value) {
             $(this).parent('.form-group').addClass('has-success');
             $(this).parent('.form-group').removeClass('has-error');
+            $(this).siblings('.o_invalid_field').remove();
         }
         else {
             $(this).parent('.form-group').addClass('has-error');