diff --git a/addons/payment/static/src/js/payment_form.js b/addons/payment/static/src/js/payment_form.js
index 7cf5bb66c7a..0942e46ac92 100644
--- a/addons/payment/static/src/js/payment_form.js
+++ b/addons/payment/static/src/js/payment_form.js
@@ -33,8 +33,28 @@ odoo.define('payment.payment_form', function (require){
                     var acquirer_id = this.getAcquirerIdFromRadio(checked_radio);
                     var acquirer_form = this.$('#o_payment_add_token_acq_' + acquirer_id);
                     // we retrieve all the input inside the acquirer form and 'serialize' them to an indexed array
-                    var form_data = this.getFormData($('input', acquirer_form));
+                    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;
+
+                    inputs_form.toArray().forEach(function(element) {
+                        if(element.dataset.isRequired) {
+                            if (element.value.length === 0) {
+                                $(element).closest('div').addClass('has-error');
+                            }
+                            else {
+                                $(element).closest('div').removeClass('has-error');
+                            }
+                            empty_inputs = true;
+                        }
+                    });
+
+                    if(empty_inputs) {
+                        this.error(_t('Missing values'), _t('<p>Please fill all the inputs required.</p>'));
+                        return;
+                    }
+
                     $(button).attr('disabled', true);
                     $(button).prepend('<span class="o_loader"><i class="fa fa-refresh fa-spin"></i>&nbsp;</span>');
 
@@ -148,16 +168,35 @@ odoo.define('payment.payment_form', function (require){
 
             // we check if the user has selected a 'add a new payment' option
             if(checked_radio.length == 1 && this.isNewPaymentRadio(checked_radio[0])) {
-                // then we add a 'processing' icon into the 'add a new payment' button
-                $(button).attr('disabled', true);
-                $(button).prepend('<span class="o_loader"><i class="fa fa-refresh fa-spin"></i>&nbsp;</span>');
                 // we retrieve which acquirer is used
                 checked_radio = checked_radio[0];
                 var acquirer_id = this.getAcquirerIdFromRadio(checked_radio);
                 var acquirer_form = this.$('#o_payment_add_token_acq_' + acquirer_id);
                 // we retrieve all the input inside the acquirer form and 'serialize' them to an indexed array
-                var form_data = this.getFormData($('input', acquirer_form));
+                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;
+
+                inputs_form.toArray().forEach(function(element) {
+                    if(element.dataset.isRequired) {
+                        if (element.value.length === 0) {
+                            $(element).closest('div').addClass('has-error');
+                        }
+                        else {
+                            $(element).closest('div').removeClass('has-error');
+                        }
+                        empty_inputs = true;
+                    }
+                });
+
+                if(empty_inputs) {
+                    this.error(_t('Missing values'), _t('<p>Please fill all the inputs required.</p>'));
+                    return;
+                }
+                // We add a 'processing' icon into the 'add a new payment' button
+                $(button).attr('disabled', true);
+                $(button).prepend('<span class="o_loader"><i class="fa fa-refresh fa-spin"></i>&nbsp;</span>');
 
                 // we force the check when adding a card trough here
                 form_data.verify_validity = true;
diff --git a/addons/payment_authorize/views/payment_authorize_templates.xml b/addons/payment_authorize/views/payment_authorize_templates.xml
index 2d0ff3cf7d5..efef504dfec 100644
--- a/addons/payment_authorize/views/payment_authorize_templates.xml
+++ b/addons/payment_authorize/views/payment_authorize_templates.xml
@@ -53,19 +53,19 @@
             <input type="hidden" name="data_set" data-create-route="/payment/authorize/s2s/create_json_3ds"/>
             <div class="mt8">
                 <div t-att-class="'form-group col-md-12' if bootstrap_formatting else 'form-group'">
-                    <input type="tel" name="cc_number" id="cc_number" class="form-control" placeholder="Card number"/>
+                    <input type="tel" name="cc_number" id="cc_number" class="form-control" placeholder="Card number" data-is-required="true"/>
                     <div class="card_placeholder"></div>
                     <div class="visa"></div>
                     <input type="hidden" name="cc_brand" value=""/>
                 </div>
                 <div t-att-class="'form-group col-md-5' if bootstrap_formatting else 'form-group'">
-                    <input type="text" name="cc_holder_name" id="cc_holder_name" class="form-control" placeholder="Cardholder name"/>
+                    <input type="text" name="cc_holder_name" id="cc_holder_name" class="form-control" placeholder="Cardholder name" data-is-required="true"/>
                 </div>
                 <div t-att-class="'form-group col-md-3' if bootstrap_formatting else 'form-group'">
-                    <input type="text" name="cc_expiry" id="cc_expiry" class="form-control" maxlength="7" placeholder="Expires (MM / YY)"/>
+                    <input type="text" name="cc_expiry" id="cc_expiry" class="form-control" maxlength="7" placeholder="Expires (MM / YY)" data-is-required="true"/>
                 </div>
                 <div t-att-class="'form-group col-md-4' if bootstrap_formatting else 'form-group'">
-                    <input type="text" name="cc_cvc" id="cc_cvc" class="form-control" maxlength="4" placeholder="CVC"/>
+                    <input type="text" name="cc_cvc" id="cc_cvc" class="form-control" maxlength="4" placeholder="CVC" data-is-required="true"/>
                 </div>
             </div>
             <input type="hidden" name="acquirer_id" t-att-value="id"/>
diff --git a/addons/payment_ogone/views/payment_ogone_templates.xml b/addons/payment_ogone/views/payment_ogone_templates.xml
index 09a956df883..37e1daaa211 100644
--- a/addons/payment_ogone/views/payment_ogone_templates.xml
+++ b/addons/payment_ogone/views/payment_ogone_templates.xml
@@ -42,19 +42,19 @@
             <input t-if="partner_id" type="hidden" name="partner_id" t-att-value="partner_id"/>
             <div class="mt8">
                 <div t-att-class="'form-group col-md-12' if bootstrap_formatting else 'form-group'">
-                    <input type="tel" name="cc_number" id="cc_number" class="form-control" placeholder="Card number"/>
+                    <input type="tel" name="cc_number" id="cc_number" class="form-control" placeholder="Card number" data-is-required="true"/>
                     <div class="card_placeholder"></div>
                     <div class="visa"></div>
                     <input type="hidden" name="cc_brand" value=""/>
                 </div>
                 <div t-att-class="'form-group col-md-5' if bootstrap_formatting else 'form-group'">
-                    <input type="text" name="cc_holder_name" id="cc_holder_name" class="form-control" placeholder="Cardholder name"/>
+                    <input type="text" name="cc_holder_name" id="cc_holder_name" class="form-control" placeholder="Cardholder name" data-is-required="true"/>
                 </div>
                 <div t-att-class="'form-group col-md-3' if bootstrap_formatting else 'form-group'">
-                    <input type="text" name="cc_expiry" id="cc_expiry" class="form-control" maxlength="7" placeholder="Expires (MM / YY)"/>
+                    <input type="text" name="cc_expiry" id="cc_expiry" class="form-control" maxlength="7" placeholder="Expires (MM / YY)" data-is-required="true"/>
                 </div>
                 <div t-att-class="'form-group col-md-4' if bootstrap_formatting else 'form-group'">
-                    <input type="text" name="cc_cvc" id="cc_cvc" class="form-control" maxlength="4" placeholder="CVC"/>
+                    <input type="text" name="cc_cvc" id="cc_cvc" class="form-control" maxlength="4" placeholder="CVC" data-is-required="true"/>
                 </div>
             </div>
         </template>
diff --git a/addons/payment_stripe/views/payment_stripe_templates.xml b/addons/payment_stripe/views/payment_stripe_templates.xml
index 489c8d7908e..3ebaef50729 100644
--- a/addons/payment_stripe/views/payment_stripe_templates.xml
+++ b/addons/payment_stripe/views/payment_stripe_templates.xml
@@ -30,19 +30,19 @@
             <input type="hidden" name="data_set" data-create-route="/payment/stripe/s2s/create_json_3ds"/>
             <div class="mt8">
                 <div t-att-class="'form-group col-md-12' if bootstrap_formatting else 'form-group'">
-                    <input type="tel" name="cc_number" id="cc_number" class="form-control" placeholder="Card number"/>
+                    <input type="tel" name="cc_number" id="cc_number" class="form-control" placeholder="Card number" data-is-required="true"/>
                     <div class="card_placeholder"></div>
                     <div class="visa"></div>
                     <input type="hidden" name="cc_brand" value=""/>
                 </div>
                 <div t-att-class="'form-group col-md-5' if bootstrap_formatting else 'form-group'">
-                    <input type="text" name="cc_holder_name" id="cc_holder_name" class="form-control" placeholder="Cardholder name"/>
+                    <input type="text" name="cc_holder_name" id="cc_holder_name" class="form-control" placeholder="Cardholder name" data-is-required="true"/>
                 </div>
                 <div t-att-class="'form-group col-md-3' if bootstrap_formatting else 'form-group'">
-                    <input type="text" name="cc_expiry" id="cc_expiry" class="form-control" maxlength="7" placeholder="Expires (MM / YY)"/>
+                    <input type="text" name="cc_expiry" id="cc_expiry" class="form-control" maxlength="7" placeholder="Expires (MM / YY)" data-is-required="true"/>
                 </div>
                 <div t-att-class="'form-group col-md-4' if bootstrap_formatting else 'form-group'">
-                    <input type="text" name="cvc" id="cvc" class="form-control" maxlength="4" placeholder="CVC"/>
+                    <input type="text" name="cvc" id="cvc" class="form-control" maxlength="4" placeholder="CVC" data-is-required="true"/>
                 </div>
                 <input type="hidden" name="acquirer_id" t-att-value="id"/>
                 <input t-if="return_url" type="hidden" name="return_url" t-att-value="return_url"/>