[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).
This commit is contained in:
fda-odoo
@@ -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();
|
||||
|
||||
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user