[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

@@ -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.

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"] {