Merge pull request #221 from Badgerati/Issue-208

Add -Required switch to form elements
Badgerati · Nov 21, 2021 · 01fcbec · 01fcbec
2 parents 49242ff + f24db19
commit 01fcbec
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 22 deletions.
diff --git a/src/Public/Elements.ps1 b/src/Public/Elements.ps1
@@ -84,7 +84,10 @@ function New-PodeWebTextbox
         $NoAuthentication,
 
         [switch]
-        $NoForm
+        $NoForm,
+
+        [switch]
+        $Required
     )
 
     $Id = Get-PodeWebElementId -Tag Textbox -Id $Id -Name $Name
@@ -133,6 +136,7 @@ function New-PodeWebTextbox
         }
         NoAuthentication = $NoAuthentication.IsPresent
         NoForm = $NoForm.IsPresent
+        Required = $Required.IsPresent
     }
 
     # create autocomplete route
@@ -184,7 +188,10 @@ function New-PodeWebFileUpload
         $CssStyle,
 
         [switch]
-        $NoForm
+        $NoForm,
+
+        [switch]
+        $Required
     )
 
     $Id = Get-PodeWebElementId -Tag File -Id $Id -Name $Name
@@ -199,6 +206,7 @@ function New-PodeWebFileUpload
         CssStyles = (ConvertTo-PodeWebStyles -Style $CssStyle)
         NoEvents = $true
         NoForm = $NoForm.IsPresent
+        Required = $Required.IsPresent
     }
 }
 
@@ -379,7 +387,10 @@ function New-PodeWebCheckbox
         $Disabled,
 
         [switch]
-        $NoForm
+        $NoForm,
+
+        [switch]
+        $Required
     )
 
     $Id = Get-PodeWebElementId -Tag Checkbox -Id $Id -Name $Name
@@ -402,6 +413,7 @@ function New-PodeWebCheckbox
         CssClasses = ($CssClass -join ' ')
         CssStyles = (ConvertTo-PodeWebStyles -Style $CssStyle)
         NoForm = $NoForm.IsPresent
+        Required = $Required.IsPresent
     }
 }
 
@@ -436,7 +448,10 @@ function New-PodeWebRadio
         $Disabled,
 
         [switch]
-        $NoForm
+        $NoForm,
+
+        [switch]
+        $Required
     )
 
     $Id = Get-PodeWebElementId -Tag Radio -Id $Id -Name $Name
@@ -453,6 +468,7 @@ function New-PodeWebRadio
         CssClasses = ($CssClass -join ' ')
         CssStyles = (ConvertTo-PodeWebStyles -Style $CssStyle)
         NoForm = $NoForm.IsPresent
+        Required = $Required.IsPresent
     }
 }
 
@@ -499,7 +515,10 @@ function New-PodeWebSelect
         $Multiple,
 
         [switch]
-        $NoForm
+        $NoForm,
+
+        [switch]
+        $Required
     )
 
     $Id = Get-PodeWebElementId -Tag Select -Id $Id -Name $Name
@@ -524,6 +543,7 @@ function New-PodeWebSelect
         CssStyles = (ConvertTo-PodeWebStyles -Style $CssStyle)
         NoAuthentication = $NoAuthentication.IsPresent
         NoForm = $NoForm.IsPresent
+        Required = $Required.IsPresent
     }
 
     $routePath = "/components/select/$($Id)"
@@ -597,7 +617,10 @@ function New-PodeWebRange
         $ShowValue,
 
         [switch]
-        $NoForm
+        $NoForm,
+
+        [switch]
+        $Required
     )
 
     $Id = Get-PodeWebElementId -Tag Range -Id $Id -Name $Name
@@ -624,6 +647,7 @@ function New-PodeWebRange
         CssClasses = ($CssClass -join ' ')
         CssStyles = (ConvertTo-PodeWebStyles -Style $CssStyle)
         NoForm = $NoForm.IsPresent
+        Required = $Required.IsPresent
     }
 }
 
@@ -1137,7 +1161,10 @@ function New-PodeWebCredential
         $ReadOnly,
 
         [switch]
-        $NoLabels
+        $NoLabels,
+
+        [switch]
+        $Required
     )
 
     $Id = Get-PodeWebElementId -Tag Cred -Id $Id -Name $Name
@@ -1153,6 +1180,7 @@ function New-PodeWebCredential
         NoLabels = $NoLabels.IsPresent
         CssClasses = ($CssClass -join ' ')
         CssStyles = (ConvertTo-PodeWebStyles -Style $CssStyle)
+        Required = $Required.IsPresent
     }
 }
 
@@ -1184,7 +1212,10 @@ function New-PodeWebDateTime
         $ReadOnly,
 
         [switch]
-        $NoLabels
+        $NoLabels,
+
+        [switch]
+        $Required
     )
 
     $Id = Get-PodeWebElementId -Tag DateTime -Id $Id -Name $Name
@@ -1200,6 +1231,7 @@ function New-PodeWebDateTime
         NoLabels = $NoLabels.IsPresent
         CssClasses = ($CssClass -join ' ')
         CssStyles = (ConvertTo-PodeWebStyles -Style $CssStyle)
+        Required = $Required.IsPresent
     }
 }
 
@@ -1255,7 +1287,10 @@ function New-PodeWebMinMax
         $ReadOnly,
 
         [switch]
-        $NoLabels
+        $NoLabels,
+
+        [switch]
+        $Required
     )
 
     $Id = Get-PodeWebElementId -Tag MinMax -Id $Id -Name $Name
@@ -1285,6 +1320,7 @@ function New-PodeWebMinMax
             Text = $AppendText
             Icon = $AppendIcon
         }
+        Required = $Required.IsPresent
     }
 }
 

diff --git a/src/Templates/Views/elements/checkbox.pode b/src/Templates/Views/elements/checkbox.pode
@@ -19,18 +19,23 @@
                 $checked = 'checked'
             }
 
+            $required = [string]::Empty
+            if ($data.Required) {
+                $required = "required"
+            }
+
             for ($i = 0; $i -lt $data.Options.Length; $i++) {
                 if ($data.AsSwitch) {
                     "<div class='custom-control custom-switch $($inline)' style='$($data.CssStyles)'>
-                        <input type='checkbox' class='custom-control-input' value='$($data.Options[$i])' id='$($data.ID)_option$($i)' name='$($data.Name)' pode-option-id='$($i)' $($disabled) $($checked)>
+                        <input type='checkbox' class='custom-control-input' value='$($data.Options[$i])' id='$($data.ID)_option$($i)' name='$($data.Name)' pode-option-id='$($i)' $($disabled) $($checked) $($required)>
                         <label class='custom-control-label' for='$($data.ID)_option$($i)'>
                             $(if ($data.Options[$i] -ine 'true') { $data.Options[$i] })
                         </label>
                     </div>"
                 }
                 else {
                     "<div class='form-check $($inline)' style='$($data.CssStyles)'>
-                        <input class='form-check-input' type='checkbox' value='$($data.Options[$i])' id='$($data.ID)_option$($i)' name='$($data.Name)' pode-option-id='$($i)' $($disabled) $($checked)>
+                        <input class='form-check-input' type='checkbox' value='$($data.Options[$i])' id='$($data.ID)_option$($i)' name='$($data.Name)' pode-option-id='$($i)' $($disabled) $($checked) $($required)>
                         <label class='form-check-label' for='$($data.ID)_option$($i)'>
                             $(if ($data.Options[$i] -ine 'true') { $data.Options[$i] })
                         </label>

diff --git a/src/Templates/Views/elements/credential.pode b/src/Templates/Views/elements/credential.pode
@@ -12,6 +12,11 @@
                 $readOnly = "readonly"
             }
 
+            $required = [string]::Empty
+            if ($data.Required) {
+                $required = "required"
+            }
+
             $placeholder = [string]::Empty
 
             "<div class='form-row' id='$($data.ID)' name='$($data.Name)' pode-object='$($data.ObjectType)' $(ConvertTo-PodeWebEvents -Events $data.Events)>
@@ -22,7 +27,7 @@
                     else {
                         $placeholder = "placeholder='Username'"
                     }
-                    "<input type='text' class='form-control' style='$($data.CssStyles)' id='$($data.ID)_username' name='$($data.Name)_Username' $($describedBy) $($readOnly) $($placeholder)>
+                    "<input type='text' class='form-control' style='$($data.CssStyles)' id='$($data.ID)_username' name='$($data.Name)_Username' $($describedBy) $($readOnly) $($required) $($placeholder)>
                 </div>
                 <div class='form-group col-md-6'>"
                     if (!$data.NoLabels) {
@@ -33,7 +38,7 @@
                     }
                     "<div class='input-group mb-2'>
                         <div class='input-group-prepend'><div class='input-group-text'><span class='mdi mdi-lock'></span></div></div>
-                        <input type='password' class='form-control' style='$($data.CssStyles)' id='$($data.ID)_password' name='$($data.Name)_Password' $($describedBy) $($readOnly) $($placeholder)>
+                        <input type='password' class='form-control' style='$($data.CssStyles)' id='$($data.ID)_password' name='$($data.Name)_Password' $($describedBy) $($readOnly) $($required) $($placeholder)>
                     </div>
                 </div>
             </div>"

diff --git a/src/Templates/Views/elements/datetime.pode b/src/Templates/Views/elements/datetime.pode
@@ -12,18 +12,23 @@
                 $readOnly = "readonly"
             }
 
+            $required = [string]::Empty
+            if ($data.Required) {
+                $required = "required"
+            }
+
             "<div class='form-row' id='$($data.ID)' name='$($data.Name)' pode-object='$($data.ObjectType)' $(ConvertTo-PodeWebEvents -Events $data.Events)>
                 <div class='form-group col-md-6'>"
                     if (!$data.NoLabels) {
                         "<label for='$($data.ID)_date'>Date</label>"
                     }
-                    "<input type='date' class='form-control' style='$($data.CssStyles)' id='$($data.ID)_date' name='$($data.Name)_Date' $($describedBy) $($readOnly)>
+                    "<input type='date' class='form-control' style='$($data.CssStyles)' id='$($data.ID)_date' name='$($data.Name)_Date' $($describedBy) $($readOnly) $($required)>
                 </div>
                 <div class='form-group col-md-6'>"
                     if (!$data.NoLabels) {
                         "<label for='$($data.ID)_time'>Time</label>"
                     }
-                    "<input type='time' class='form-control' style='$($data.CssStyles)' id='$($data.ID)_time' name='$($data.Name)_Time' $($describedBy) $($readOnly)>
+                    "<input type='time' class='form-control' style='$($data.CssStyles)' id='$($data.ID)_time' name='$($data.Name)_Time' $($describedBy) $($readOnly) $($required)>
                 </div>
             </div>"
         )

diff --git a/src/Templates/Views/elements/fileupload.pode b/src/Templates/Views/elements/fileupload.pode
@@ -3,7 +3,7 @@
         "<label for='$($data.ID)' class='col-sm-2 col-form-label'>$($data.Name)</label>"
     })
     <div class="col-sm-10">
-        <input type='file' class="form-control-file $(if ($data.NoForm) { 'no-form' })" id="$($data.ID)" name="$($data.Name)" pode-object="$($data.ObjectType)" style="$($data.CssStyles)">
+        <input type='file' class="form-control-file $(if ($data.NoForm) { 'no-form' })" id="$($data.ID)" name="$($data.Name)" pode-object="$($data.ObjectType)" style="$($data.CssStyles)" $(if ($data.Required) { 'required' })>
         <div id="$($data.ID)_validation" class="invalid-feedback"></div>
     </div>
 </div>
diff --git a/src/Templates/Views/elements/minmax.pode b/src/Templates/Views/elements/minmax.pode
@@ -12,6 +12,11 @@
                 $readOnly = "readonly"
             }
 
+            $required = [string]::Empty
+            if ($data.Required) {
+                $required = "required"
+            }
+
             $wrapped = ($data.Prepend.Enabled -or $data.Append.Enabled)
 
             $prepend = [string]::Empty
@@ -46,7 +51,7 @@
                     }
 
                     $element += $prepend
-                    $element += "<input type='number' class='form-control' style='$($data.CssStyles)' id='$($data.ID)_min' name='$($data.Name)_Min' value='$($data.Values.Min)' $($describedBy) $($readOnly)>"
+                    $element += "<input type='number' class='form-control' style='$($data.CssStyles)' id='$($data.ID)_min' name='$($data.Name)_Min' value='$($data.Values.Min)' $($describedBy) $($readOnly) $($required)>"
                     $element += $append
 
                     if ($wrapped) {
@@ -66,7 +71,7 @@
                     }
 
                     $element += $prepend
-                    $element += "<input type='number' class='form-control' style='$($data.CssStyles)' id='$($data.ID)_max' name='$($data.Name)_Max' value='$($data.Values.Max)' $($describedBy) $($readOnly)>"
+                    $element += "<input type='number' class='form-control' style='$($data.CssStyles)' id='$($data.ID)_max' name='$($data.Name)_Max' value='$($data.Values.Max)' $($describedBy) $($readOnly) $($required)>"
                     $element += $append
 
                     if ($wrapped) {

diff --git a/src/Templates/Views/elements/radio.pode b/src/Templates/Views/elements/radio.pode
@@ -12,7 +12,7 @@
 
                 for ($i = 0; $i -lt $data.Options.Length; $i++) {
                     "<div class='form-check $($inline)' style='$($data.CssStyles)'>
-                        <input class='form-check-input' type='radio' name='$($data.Name)' id='$($data.ID)_option$($i)' value='$($data.Options[$i])' $(if ($i -eq 0) { 'checked' }) $(if ($data.Disabled) { 'disabled' })>
+                        <input class='form-check-input' type='radio' name='$($data.Name)' id='$($data.ID)_option$($i)' value='$($data.Options[$i])' $(if ($i -eq 0) { 'checked' }) $(if ($data.Disabled) { 'disabled' }) $(if ($data.Required) { 'required' })>
                         <label class='form-check-label' for='$($data.ID)_option$($i)'>
                             $($data.Options[$i])
                         </label>

diff --git a/src/Templates/Views/elements/range.pode b/src/Templates/Views/elements/range.pode
@@ -9,7 +9,7 @@
                 $showValue = 'pode-range-value'
             }
 
-            "<input type='range' class='form-control-range $($showValue)' style='$($data.CssStyles)' id='$($data.ID)' pode-object='$($data.ObjectType)' name='$($data.Name)' value='$($data.Value)' min='$($data.Min)' max='$($data.Max)' $(if ($data.Disabled) { 'disabled' }) $(ConvertTo-PodeWebEvents -Events $data.Events)>"
+            "<input type='range' class='form-control-range $($showValue)' style='$($data.CssStyles)' id='$($data.ID)' pode-object='$($data.ObjectType)' name='$($data.Name)' value='$($data.Value)' min='$($data.Min)' max='$($data.Max)' $(if ($data.Disabled) { 'disabled' }) $(if ($data.Required) { 'required' }) $(ConvertTo-PodeWebEvents -Events $data.Events)>"
 
             if ($data.ShowValue) {
                 "<input type='number' class='form-control $($showValue)' id='$($data.ID)_value' for='$($data.ID)' value='$($data.Value)' min='$($data.Min)' max='$($data.Max)'>"

diff --git a/src/Templates/Views/elements/select.pode b/src/Templates/Views/elements/select.pode
@@ -17,6 +17,7 @@
                 pode-object='$($data.ObjectType)'
                 pode-dynamic='$($data.IsDynamic)'
                 $($multiple)
+                $(if ($data.Required) { 'required' })
                 $(ConvertTo-PodeWebEvents -Events $data.Events)
             >"
 

diff --git a/src/Templates/Views/elements/textbox.pode b/src/Templates/Views/elements/textbox.pode
@@ -16,6 +16,11 @@
                 $readOnly = "readonly"
             }
 
+            $required = [string]::Empty
+            if ($data.Required) {
+                $required = "required"
+            }
+
             $value = [string]::Empty
             if (![string]::IsNullOrWhiteSpace($data.Value)) {
                 $value = "value='$($data.Value)'"
@@ -29,7 +34,7 @@
             $events = ConvertTo-PodeWebEvents -Events $data.Events
 
             if ($data.Multiline) {
-                $element = "<textarea class='form-control $(if ($data.NoForm) { 'no-form' })' id='$($data.ID)' name='$($data.Name)' pode-object='$($data.ObjectType)' placeholder='$($data.Placeholder)' rows='$($data.Size)' style='$($width) $($data.CssStyles)' $($describedBy) $($readOnly) $($value) $($events)></textarea>"
+                $element = "<textarea class='form-control $(if ($data.NoForm) { 'no-form' })' id='$($data.ID)' name='$($data.Name)' pode-object='$($data.ObjectType)' placeholder='$($data.Placeholder)' rows='$($data.Size)' style='$($width) $($data.CssStyles)' $($describedBy) $($readOnly) $($required) $($value) $($events)></textarea>"
             }
             else {
                 if ($data.Prepend.Enabled -or $data.Append.Enabled) {
@@ -50,7 +55,7 @@
                     $_type = 'datetime-local'
                 }
 
-                $element += "<input type='$($_type.ToLowerInvariant())' class='form-control $(if ($data.NoForm) { 'no-form' })' id='$($data.ID)' name='$($data.Name)' pode-object='$($data.ObjectType)' style='$($width) $($data.CssStyles)' placeholder='$($data.Placeholder)' pode-autocomplete='$($data.IsAutoComplete)' $($describedBy) $($readOnly) $($value) $($events)>"
+                $element += "<input type='$($_type.ToLowerInvariant())' class='form-control $(if ($data.NoForm) { 'no-form' })' id='$($data.ID)' name='$($data.Name)' pode-object='$($data.ObjectType)' style='$($width) $($data.CssStyles)' placeholder='$($data.Placeholder)' pode-autocomplete='$($data.IsAutoComplete)' $($describedBy) $($readOnly) $($required) $($value) $($events)>"
 
                 if ($data.Append.Enabled) {
                     if (![string]::IsNullOrWhiteSpace($data.Append.Text)) {