files validation

Oqtane.Client/Modules/Admin/Files/Add.razor

@@ -19,6 +19,7 @@
         </div>
         <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
     </TabPanel>
+    <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
         <TabPanel Name="Download" Heading="Download Files" ResourceKey="DownloadFiles">
             @if (_folders != null)
             {
@@ -26,13 +27,13 @@
                     <div class="row mb-1 align-items-center">
                         <Label Class="col-sm-3" For="url" HelpText="Enter the url of the file you wish to download" ResourceKey="Url">Url: </Label>
                         <div class="col-sm-9">
-                    <input id="url" class="form-control" @bind="@url" />
+                            <input id="url" class="form-control" @bind="@url" required />
                         </div>
                     </div>
                     <div class="row mb-1 align-items-center">
                         <Label Class="col-sm-3" For="folder" HelpText="Select the folder to save the file in" ResourceKey="Folder">Folder: </Label>
                         <div class="col-sm-9">
-                    <select id="folder" class="form-select" @bind="@_folderId">
+                            <select id="folder" class="form-select" @bind="@_folderId" required>
                                 <option value="-1">&lt;@Localizer["Folder.Select"]&gt;</option>
                                 @foreach (Folder folder in _folders)
                                 {
@@ -46,9 +47,12 @@
                 <NavLink class="btn btn-secondary" href="@NavigateUrl()">@SharedLocalizer["Cancel"]</NavLink>
             }
         </TabPanel>
+    </form>
 </TabStrip>
 
 @code {
+    private ElementReference form;
+    private bool validated = false;
     private string url = string.Empty;
     private List<Folder> _folders;
     private int _folderId = -1;
@@ -66,6 +70,10 @@
     }
 
     private async Task Download()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             if (url == string.Empty || _folderId == -1)
             {
@@ -100,4 +108,9 @@
                 AddModuleMessage(Localizer["Error.Download.InvalidUrl"], MessageType.Error);
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 }

Oqtane.Client/Modules/Admin/Files/Details.razor

@@ -8,17 +8,18 @@
 
 @if (_folders != null)
 {
+    <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
         <div class="container">
             <div class="row mb-1 align-items-center">
                 <Label Class="col-sm-3" For="name" HelpText="The name of the file" ResourceKey="Name">Name: </Label>
                 <div class="col-sm-9">
-            <input id="name" class="form-control" @bind="@_name" />
+                    <input id="name" class="form-control" @bind="@_name" maxlength="50" required />
                 </div>
             </div>
             <div class="row mb-1 align-items-center">
                 <Label Class="col-sm-3" For="parent" HelpText="The folder where the file is located" ResourceKey="Folder">Folder: </Label>
                 <div class="col-sm-9">
-            <select id="parent" class="form-select" @bind="@_folderId">
+                    <select id="parent" class="form-select" @bind="@_folderId" required>
                         @foreach (Folder folder in _folders)
                         {
                             <option value="@(folder.FolderId)">@(new string('-', folder.Level * 2))@(folder.Name)</option>
@@ -38,9 +39,12 @@
         <br />
         <br />
         <AuditInfo CreatedBy="@_createdBy" CreatedOn="@_createdOn" ModifiedBy="@_modifiedBy" ModifiedOn="@_modifiedOn"></AuditInfo>
+    </form>
 }
 
 @code {
+    private ElementReference form;
+    private bool validated = false;
     private int _fileId = -1;
     private string _name;
     private List<Folder> _folders;
@@ -81,6 +85,10 @@
     }
 
     private async Task SaveFile()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             try
             {
@@ -104,4 +112,9 @@
                 AddModuleMessage(Localizer["Error.File.Save"], MessageType.Error);
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 }

Oqtane.Client/Modules/Admin/Files/Edit.razor

@@ -8,11 +8,12 @@
 
 @if (_folders != null)
 {
+    <form @ref="form" class="@(validated ? "was-validated" : "needs-validation")" novalidate>
         <div class="container">
             <div class="row mb-1 align-items-center">
                 <Label Class="col-sm-3" For="parent" HelpText="Select the parent folder" ResourceKey="Parent">Parent: </Label>
                 <div class="col-sm-9">
-            <select id="parent" class="form-select" @bind="@_parentId">
+                    <select id="parent" class="form-select" @bind="@_parentId" required>
                         @if (PageState.QueryString.ContainsKey("id"))
                         {
                             <option value="-1">&lt;@Localizer["NoParent"]&gt;</option>
@@ -27,7 +28,7 @@
             <div class="row mb-1 align-items-center">
                 <Label Class="col-sm-3" For="name" HelpText="Enter the folder name" ResourceKey="Name">Name: </Label>
                 <div class="col-sm-9">
-            <input id="name" class="form-control" @bind="@_name" />
+                    <input id="name" class="form-control" @bind="@_name" maxlength="50" required />
                 </div>
             </div>
             <div class="row mb-1 align-items-center">
@@ -39,7 +40,7 @@
                     }
                     else
                     {
-                <select id="type" class="form-select" @bind="@_type">
+                        <select id="type" class="form-select" @bind="@_type" required>
                             <option value="@FolderTypes.Private">@Localizer[FolderTypes.Private]</option>
                             <option value="@FolderTypes.Public">@Localizer[FolderTypes.Public]</option>
                         </select>
@@ -54,6 +55,7 @@
                 </div>
             </div>
         </div>
+    </form>
 
     @if (!_isSystem)
     {
@@ -75,6 +77,8 @@
 }
 
 @code {
+    private ElementReference form;
+    private bool validated = false;
     private List<Folder> _folders;
     private int _folderId = -1;
     private int _parentId = -1;
@@ -132,6 +136,10 @@
     }
 
     private async Task SaveFolder()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             if (_name == string.Empty || _parentId == -1)
             {
@@ -199,6 +207,11 @@
                 AddModuleMessage(Localizer["Error.Folder.Save"], MessageType.Error);
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 
     private async Task DeleteFolder()
     {