From 50beec7fa0029f6ece11df02a26e333a8430ee95 Mon Sep 17 00:00:00 2001 From: fda-odoo Date: Tue, 12 Dec 2017 11:49:42 +0100 Subject: [PATCH] [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). --- addons/payment/static/src/js/payment_form.js | 125 ++++++++++-------- .../payment/static/src/js/payment_portal.js | 3 + 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('
' + _.str.escapeHTML("The value is invalid.") + '
'); + wrong_input = true; + } + else if ($(element).closest('div.form-group').hasClass('has-error')) { + wrong_input = true; + $(element).closest('div.form-group').append('
' + _.str.escapeHTML("The value is invalid.") + '
'); } }); - if (empty_inputs) { - this.displayError( - _t('Missing values'), - _t('

Please fill all the inputs required.

') - ); + if (wrong_input) { return; } @@ -106,7 +110,7 @@ odoo.define('payment.payment_form', function (require) { else { self.displayError( _t('Server Error'), - _t("

We are not able to add your payment method at the moment.

")); + _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("

We are not able to add your payment method at the moment.

") + - "

" + - (core.debug ? (data.data.message.replace(/\n/g, "
")): '') + - "

" + _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("

We are not able to redirect you to the payment form.

") + _t("We are not able to redirect you to the payment form.") ); } }).fail(function (message, data) { self.displayError( _t('Server Error'), - _t("

We are not able to redirect you to the payment form.

") + - "

" + - (core.debug ? (data.data.message.replace(/\n/g, "
")): '') + - "

" + _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("

We're unable to process your payment.

") + _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('

Please select a payment method.

') + _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 = '
' + _.str.escapeHTML("The value is invalid.") + '
'; + $(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 = '
' + _.str.escapeHTML("The value is invalid.") + '
'; + $(element).closest('div.form-group').append(message); } }); - if (empty_inputs) { - this.displayError( - _t('Missing values'), - _t('

Please fill all the inputs required.

') - ); + 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("

We are not able to add your payment method at the moment.

") + - "

" + - (core.debug ? (data.data.message.replace(/\n/g, "
")): '') + - "

" + _t("We are not able to add your payment method at the moment.

") + + data.data.message ); }); } else { this.displayError( _t('No payment method selected'), - _t('

Please select the option to add a new payment method.

') + _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("

We are not able to delete your payment method at the moment.

") + _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 += '

' + _.str.escapeHTML(sub.name) + '

'; + content += '

' + sub.name + '

'; }); content = $('

').html(_t('

This card is currently linked to the following records:

') + content); @@ -343,7 +347,7 @@ odoo.define('payment.payment_form', function (require) { }, function (type, err) { self.displayError( _t('Server Error'), - _t("

We are not able to delete your payment method at the moment.

") + (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: "

" + (_.str.escapeHTML(message) || "") + "

" , + buttons: [ + {text: _t('Ok'), close: true}]}).open(); + } else { + // removed if exist error message + this.$('#payment_error').remove(); + var messageResult = '
'; + if (title != '') { + messageResult = messageResult + '' + _.str.escapeHTML(title) + ':
'; + } + messageResult = messageResult + _.str.escapeHTML(message) + '
'; + $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');