profiles validation

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

@@ -5,59 +5,60 @@
 @inject IStringLocalizer<Edit> Localizer
 @inject IStringLocalizer<SharedResources> SharedLocalizer
 
+<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 this profile item" 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="title" HelpText="The title of the profile item to display to the user" ResourceKey="Title">Title: </Label>
             <div class="col-sm-9">
-            <input id="title" class="form-control" @bind="@_title" />
+                <input id="title" class="form-control" @bind="@_title" maxlength="50" required />
             </div>
         </div>
         <div class="row mb-1 align-items-center">
             <Label Class="col-sm-3" For="description" HelpText="The help text displayed to the user for this profile item" ResourceKey="Description">Description: </Label>
             <div class="col-sm-9">
-            <textarea id="description" class="form-control" @bind="@_description" rows="5"></textarea>
+                <textarea id="description" class="form-control" @bind="@_description" rows="5" maxlength="256"></textarea>
             </div>
         </div>
         <div class="row mb-1 align-items-center">
             <Label Class="col-sm-3" For="category" HelpText="The category of this profile item (for grouping)" ResourceKey="Category">Category: </Label>
             <div class="col-sm-9">
-            <input id="category" class="form-control" @bind="@_category" />
+                <input id="category" class="form-control" @bind="@_category" maxlength="50" required />
             </div>
         </div>
         <div class="row mb-1 align-items-center">
             <Label Class="col-sm-3" For="order" HelpText="The index order of where this profile item should be displayed" ResourceKey="Order">Order: </Label>
             <div class="col-sm-9">
-            <input id="order" class="form-control" @bind="@_vieworder" />
+                <input id="order" class="form-control" @bind="@_vieworder" maxlength="4" required />
             </div>
         </div>
         <div class="row mb-1 align-items-center">
             <Label Class="col-sm-3" For="length" HelpText="The max number of characters this profile item should accept (enter zero for unlimited)" ResourceKey="Length">Length: </Label>
             <div class="col-sm-9">
-            <input id="length" class="form-control" @bind="@_maxlength" />
+                <input id="length" class="form-control" @bind="@_maxlength" maxlength="4" required />
             </div>
         </div>
         <div class="row mb-1 align-items-center">
             <Label Class="col-sm-3" For="defaultVal" HelpText="The default value for this profile item" ResourceKey="DefaultValue">Default Value: </Label>
             <div class="col-sm-9">
-            <input id="defaultVal" class="form-control" @bind="@_defaultvalue" />
+                <input id="defaultVal" class="form-control" @bind="@_defaultvalue" maxlength="2000"/>
             </div>
         </div>
         <div class="row mb-1 align-items-center">
             <Label Class="col-sm-3" For="options" HelpText="A comma delimited list of options the user can select from" ResourceKey="Options">Options: </Label>
             <div class="col-sm-9">
-            <input id="options" class="form-control" @bind="@_options" />
+                <input id="options" class="form-control" @bind="@_options" maxlength="2000" />
             </div>
         </div>
         <div class="row mb-1 align-items-center">
             <Label Class="col-sm-3" For="required" HelpText="Should a user be required to provide a value for this profile item?" ResourceKey="Required">Required? </Label>
             <div class="col-sm-9">
-            <select id="required" class="form-select" @bind="@_isrequired">
+                <select id="required" class="form-select" @bind="@_isrequired" required>
                     <option value="True">@SharedLocalizer["Yes"]</option>
                     <option value="False">@SharedLocalizer["No"]</option>
                 </select>
@@ -66,7 +67,7 @@
         <div class="row mb-1 align-items-center">
             <Label Class="col-sm-3" For="private" HelpText="Should this profile item be visible to all users?" ResourceKey="Private">Private? </Label>
             <div class="col-sm-9">
-            <select id="private" class="form-select" @bind="@_isprivate">
+                <select id="private" class="form-select" @bind="@_isprivate" required>
                     <option value="True">@SharedLocalizer["Yes"]</option>
                     <option value="False">@SharedLocalizer["No"]</option>
                 </select>
@@ -82,9 +83,12 @@
         <br />
         <AuditInfo CreatedBy="@createdby" CreatedOn="@createdon" ModifiedBy="@modifiedby" ModifiedOn="@modifiedon"></AuditInfo>
     }
+</form>
 
 @code {
     private int _profileid = -1;
+    private ElementReference form;
+    private bool validated = false;
     private string _name = string.Empty;
     private string _title = string.Empty;
     private string _description = string.Empty;
@@ -139,6 +143,10 @@
     }
 
     private async Task SaveProfile()
+    {
+        validated = true;
+        var interop = new Interop(JSRuntime);
+        if (await interop.FormValid(form))
         {
             try
             {
@@ -181,4 +189,9 @@
                 AddModuleMessage(Localizer["Error.Profile.Save"], MessageType.Error);
             }
         }
+        else
+        {
+            AddModuleMessage(SharedLocalizer["Message.InfoRequired"], MessageType.Warning);
+        }
+    }
 }