From 2a702f8a0e109208f46a7d00af4512e558a5325b Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 16 Nov 2022 17:36:41 +0000
Subject: [PATCH] [FIX] website: show invalid checkboxes, radio buttons and
 file upload

Before this commit, when submitting a website form which has invalid
radio buttons, checkboxes or file upload elements, they had no visual
difference. Now they will have red labels as intended with bootstrap.

For alone checkboxes, a warning label will appear after the checkboxes.
This will only take effects for newly added checkboxes.

Related to opw-3003952

X-original-commit: 3268b4c902c92c12f50081d31eb08d4c330ca03f
Part-of: odoo/odoo#106204
---
 addons/website/static/src/snippets/s_website_form/000.js  | 7 +++++--
 .../website/static/src/snippets/s_website_form/001.scss   | 8 ++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/addons/website/static/src/snippets/s_website_form/000.js b/addons/website/static/src/snippets/s_website_form/000.js
index 485bed1a616..4dff5cc6995 100644
--- a/addons/website/static/src/snippets/s_website_form/000.js
+++ b/addons/website/static/src/snippets/s_website_form/000.js
@@ -422,9 +422,12 @@ odoo.define('website.s_website_form', function (require) {
                 });
 
                 // Update field color if invalid or erroneous
-                $field.removeClass('o_has_error').find('.form-control, .form-select').removeClass('is-invalid');
+                const $controls = $field.find('.form-control, .form-select, .form-check-input, .form-control-file');
+                $field.removeClass('o_has_error');
+                $controls.removeClass('is-invalid');
                 if (invalid_inputs.length || error_fields[field_name]) {
-                    $field.addClass('o_has_error').find('.form-control, .form-select').addClass('is-invalid');
+                    $field.addClass('o_has_error');
+                    $controls.addClass('is-invalid');
                     if (_.isString(error_fields[field_name])) {
                         $field.popover({content: error_fields[field_name], trigger: 'hover', container: 'body', placement: 'top'});
                         // update error message and show it.
diff --git a/addons/website/static/src/snippets/s_website_form/001.scss b/addons/website/static/src/snippets/s_website_form/001.scss
index dcd5accd916..1ac1542e18a 100644
--- a/addons/website/static/src/snippets/s_website_form/001.scss
+++ b/addons/website/static/src/snippets/s_website_form/001.scss
@@ -64,6 +64,14 @@
             display: none;
         }
     }
+
+    .form-control-file.is-invalid {
+        // Note: BS5 use form-control on file inputs now, but this is kept as
+        // compatibility for now (also at the time this was done, Odoo 16.0 uses
+        // BS5 but not yet(?) form-control on file inputs).
+        padding-left: 3px;
+        border-left: 3px solid $form-feedback-invalid-color;
+    }
 }
 
 body:not(.editor_enable) .s_website_form[data-vcss="001"] {