fix a bug with checkboxes marked as "required" in the form component

sqlpage · Jul 6, 2023 · e655b74 · e655b74
1 parent cac7561
commit e655b74
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/examples/official-site/sqlpage/migrations/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql
@@ -257,7 +257,9 @@ When loading the page, the value for `$component` will be `NULL` if no value has
     '{"name": "First name", "placeholder": "John"}, '||
     '{"name": "Last name", "required": true, "description": "We need your last name for legal purposes."},'||
     '{"name": "Resume", "type": "textarea"},'||
-    '{"name": "Birth date", "type": "date", "max": "2010-01-01", "value": "1994-04-16"}]')),
+    '{"name": "Birth date", "type": "date", "max": "2010-01-01", "value": "1994-04-16"},'||
+    '{"label": "I accept the terms and conditions", "name": "terms", "type": "checkbox", "required": true}'||
+    ']')),
     ('form', 'This example illustrates the use of the `select` type.
 In this select input, the various options are hardcoded, but they could also be loaded from a database table,
 using a function to convert the rows into a json array like 

diff --git a/sqlpage/templates/form.handlebars b/sqlpage/templates/form.handlebars
@@ -7,13 +7,15 @@
             {{#if (or (eq type "radio") (eq type "checkbox"))}}
                 <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column my-1">
                     <label class="form-selectgroup-item flex-fill">
-                        <input type="{{type}}" name="{{name}}" value="{{value}}" class="form-selectgroup-input">
+                        <input type="{{type}}" name="{{name}}" value="{{value}}" {{#if required}}required{{/if}} class="form-selectgroup-input">
                         <div class="form-selectgroup-label d-flex align-items-center p-3">
                             <div class="me-3">
                                 <span class="form-selectgroup-check"></span>
                             </div>
                             <div>
                                 {{default label value}}
+                                {{~#if required}}
+                                    <span class="text-danger ms-1" aria-label="required" title="required">*</span>{{/if}}
                                 {{#if description}}
                                     <small class="form-hint mt-0">{{description}}</small>
                                 {{/if}}