From c1a6d3887298a6f290f8eaca4f9095b51d01a68c Mon Sep 17 00:00:00 2001
From: Berkan Sasmaz <berkansasmazz@gmail.com>
Date: Mon, 17 May 2021 11:47:22 +0300
Subject: [PATCH] Add validation to form fields

---
 src/EventHub.Web/Pages/Events/Edit.cshtml        | 16 ++++++++++++++--
 src/EventHub.Web/Pages/Events/New.cshtml         | 16 ++++++++++++++--
 src/EventHub.Web/Pages/Organizations/Edit.cshtml | 15 ++++++++++++---
 src/EventHub.Web/Pages/Organizations/New.cshtml  | 14 ++++++++++++--
 4 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/src/EventHub.Web/Pages/Events/Edit.cshtml b/src/EventHub.Web/Pages/Events/Edit.cshtml
index 64aa5ed..956e17c 100644
--- a/src/EventHub.Web/Pages/Events/Edit.cshtml
+++ b/src/EventHub.Web/Pages/Events/Edit.cshtml
@@ -1,4 +1,4 @@
-@page "/Event/Edit/{url}"
+@page "/event/edit/{url}"
 @inject IHtmlLocalizer<EventHubResource> L
 @using EventHub.Localization
 @using Microsoft.AspNetCore.Mvc.Localization
@@ -25,30 +25,35 @@
                                         <select asp-for="Event.OrganizationId" asp-items="Model.Organizations" class="form-select">
                                             <option selected value="">Organization</option>
                                         </select>
+                                        <span asp-validation-for="Event.OrganizationId" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-label-group">
                                         <input type="text" id="inputTitle" asp-for="Event.Title" class="form-control" placeholder="Title">
                                         <label for="inputTitle">Title</label>
+                                        <span asp-validation-for="Event.Title" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-label-group">
                                         <input id="inputStartdate" asp-for="Event.StartTime" class="form-control" placeholder="Start Date">
                                         <label for="inputStartdate">Start Date</label>
+                                        <span asp-validation-for="Event.StartTime" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-label-group">
                                         <input id="inputEnddate" asp-for="Event.EndTime" class="form-control" placeholder="End Date">
                                         <label for="inputEnddate">End Date</label>
+                                        <span asp-validation-for="Event.EndTime" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-12">
                                     <div class="form-label-group">
-                                        <input type="text" id="inputDescription" asp-for="Event.Description" class="form-control" placeholder="Description">
+                                         <textarea rows="3" type="text" id="inputDescription" asp-for="Event.Description" class="form-control" placeholder="Description"></textarea>
                                         <label for="inputDescription">Description</label>
+                                        <span asp-validation-for="Event.Description" class="text-danger"></span>
                                     </div>
                                 </div>
 
@@ -72,6 +77,7 @@
                                                 <p class="mb-3">For horizontal format 600x300 sized upload images.</p>
                                                 <input type="file" id="Event_CoverImageFile" asp-for="Event.CoverImageFile" class="form-control border-0" hidden>
                                                 <label id="upload-label" for="Event_CoverImageFile" class="btn btn-primary btn-lg text-white">Choose file</label>
+                                                <span asp-validation-for="Event.CoverImageFile" class="text-danger"></span>
                                             </div>
                                         </div>
                                     </div>
@@ -82,34 +88,40 @@
                                         <option value="@Boolean.TrueString">Online</option>
                                         <option value="@Boolean.FalseString">In Person</option>
                                     </select>
+                                    <span asp-validation-for="Event.IsOnline" class="text-danger"></span>
                                 </div>
                                 <div class="col-md-6 event-link-group" style="display: none">
                                     <div class="form-label-group">
                                         <input type="text" id="inputOnlineLink" asp-for="Event.OnlineLink" class="form-control" placeholder="Online Link">
                                         <label for="inputOnlineLink">Online Link</label>
+                                        <span asp-validation-for="Event.OnlineLink" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-label-group">
                                         <input type="number" id="inputCapacity" asp-for="Event.Capacity" class="form-control" placeholder="Capacity">
                                         <label for="inputCapacity">Capacity</label>
+                                        <span asp-validation-for="Event.Capacity" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-6 event-location-group">
                                     <select asp-for="Event.CountryId" asp-items="Model.Countries" class="form-select">
                                         <option selected="" value="">Country</option>
                                     </select>
+                                    <span asp-validation-for="Event.CountryId" class="text-danger"></span>
                                 </div>
                                 <div class="col-md-6 event-location-group">
                                     <div class="form-label-group">
                                         <input type="text" id="inputCity" asp-for="Event.City" class="form-control" placeholder="City">
                                         <label for="inputCity">City</label>
+                                        <span asp-validation-for="Event.City" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-6">
                                     <select asp-for="Event.Language" asp-items="Model.Languages" aria-label="en" class="form-select">
                                         <option selected value="">Language</option>
                                     </select>
+                                    <span asp-validation-for="Event.Language" class="text-danger"></span>
                                 </div>
 
 
diff --git a/src/EventHub.Web/Pages/Events/New.cshtml b/src/EventHub.Web/Pages/Events/New.cshtml
index c3874e5..6a3396f 100644
--- a/src/EventHub.Web/Pages/Events/New.cshtml
+++ b/src/EventHub.Web/Pages/Events/New.cshtml
@@ -36,30 +36,35 @@ else
                       <select asp-for="Event.OrganizationId" asp-items="Model.Organizations" class="form-select">
                         <option selected value="">Organization</option>
                       </select>
+                      <span asp-validation-for="Event.OrganizationId" class="text-danger"></span>
                     </div>
                   </div>
                   <div class="col-md-6">
                     <div class="form-label-group">
                       <input type="text" id="inputTitle" asp-for="Event.Title" class="form-control" placeholder="Title">
                       <label for="inputTitle">Title</label>
+                      <span asp-validation-for="Event.Title" class="text-danger"></span>
                     </div>
                   </div>
                   <div class="col-md-6">
                     <div class="form-label-group">
                       <input id="inputStartdate" asp-for="Event.StartTime" class="form-control" placeholder="Start Date">
                       <label for="inputStartdate">Start Date</label>
+                      <span asp-validation-for="Event.StartTime" class="text-danger"></span>
                     </div>
                   </div>
                   <div class="col-md-6">
                     <div class="form-label-group">
                       <input  id="inputEnddate" asp-for="Event.EndTime" class="form-control" placeholder="End Date">
                       <label for="inputEnddate">End Date</label>
+                      <span asp-validation-for="Event.EndTime" class="text-danger"></span>
                     </div>
                   </div>
                   <div class="col-md-12">
                     <div class="form-label-group">
-                      <input type="text" id="inputDescription" asp-for="Event.Description" class="form-control" placeholder="Description">
+                      <textarea rows="3" type="text" id="inputDescription" asp-for="Event.Description" class="form-control" placeholder="Description"></textarea>
                       <label for="inputDescription">Description</label>
+                      <span asp-validation-for="Event.Description" class="text-danger"></span>
                     </div>
                   </div> 
                           
@@ -73,7 +78,8 @@ else
                         <div>
                           <p class="mb-3">For horizontal format 600x300 sized upload images.</p>
                           <input type="file" id="Event_CoverImageFile" asp-for="Event.CoverImageFile" class="form-control border-0" hidden>
-                          <label id="upload-label" for="Event_CoverImageFile" class="btn btn-primary btn-lg text-white">Choose file</label> 
+                          <label id="upload-label" for="Event_CoverImageFile" class="btn btn-primary btn-lg text-white">Choose file</label>
+                          <span asp-validation-for="Event.CoverImageFile" class="text-danger"></span>
                         </div>
                       </div>
                     </div> 
@@ -84,34 +90,40 @@ else
                       <option value="@Boolean.TrueString">Online</option>
                       <option value="@Boolean.FalseString">In Person</option>
                     </select>
+                    <span asp-validation-for="Event.IsOnline" class="text-danger"></span>
                   </div>
                   <div class="col-md-6 event-link-group" style="display: none">
                     <div class="form-label-group">
                       <input type="text" id="inputOnlineLink" asp-for="Event.OnlineLink" class="form-control" placeholder="Online Link">
                       <label for="inputOnlineLink">Online Link</label>
+                      <span asp-validation-for="Event.OnlineLink" class="text-danger"></span>
                     </div>
                   </div>
                   <div class="col-md-6">
                     <div class="form-label-group">
                       <input type="number" id="inputCapacity" asp-for="Event.Capacity" class="form-control" placeholder="Capacity">
                       <label for="inputCapacity">Capacity</label>
+                      <span asp-validation-for="Event.Capacity" class="text-danger"></span>
                     </div>
                   </div>
                   <div class="col-md-6 event-location-group">
                     <select asp-for="Event.CountryId" asp-items="Model.Countries" class="form-select">
                       <option selected="" value="">Country</option>
                     </select>
+                    <span asp-validation-for="Event.CountryId" class="text-danger"></span>
                   </div>
                   <div class="col-md-6 event-location-group">
                     <div class="form-label-group">
                       <input type="text" id="inputCity" asp-for="Event.City" class="form-control" placeholder="City">
                       <label for="inputCity">City</label>
+                      <span asp-validation-for="Event.City" class="text-danger"></span>
                     </div>
                   </div>
                   <div class="col-md-6">
                     <select asp-for="Event.Language" asp-items="Model.Languages" aria-label="en" class="form-select">
                       <option selected value="">Language</option>
                     </select>
+                    <span asp-validation-for="Event.Language" class="text-danger"></span>
                   </div>
                   
 
diff --git a/src/EventHub.Web/Pages/Organizations/Edit.cshtml b/src/EventHub.Web/Pages/Organizations/Edit.cshtml
index 0290d50..84ce693 100644
--- a/src/EventHub.Web/Pages/Organizations/Edit.cshtml
+++ b/src/EventHub.Web/Pages/Organizations/Edit.cshtml
@@ -1,4 +1,4 @@
-@page "/Organization/Edit/{name}"
+@page "/organization/edit/{name}"
 @inject IHtmlLocalizer<EventHubResource> L
 @using EventHub.Localization
 @using EventHub.Organizations
@@ -42,6 +42,7 @@
                                                 <p class="mb-3">Photo size should be <span class="text-primary">max @(OrganizationConsts.MaxProfilePictureFileSize / (1024 * 1024)) MB.</span></p>
                                                 <input type="file" id="Organization_ProfilePictureFile" asp-for="Organization.ProfilePictureFile" class="form-control border-0" hidden>
                                                 <label id="upload-label" for="Organization_ProfilePictureFile" class="btn btn-primary btn-lg text-white">Upload</label>
+                                                <span asp-validation-for="Organization.ProfilePictureFile" class="text-danger"></span>
                                             </div>
                                         </div>
                                     </div>
@@ -51,6 +52,7 @@
                                     <div class="form-label-group">
                                         <input type="text" id="inputDisplayname" asp-for="Organization.DisplayName" class="form-control" placeholder="Display Name*" required="">
                                         <label for="inputDisplayname">Display Name*</label>
+                                        <span asp-validation-for="Organization.DisplayName" class="text-danger"></span>
                                     </div>
                                 </div>
                                 
@@ -58,13 +60,15 @@
                                     <div class="form-label-group">
                                         <input type="text" id="inputWebsite" class="form-control" asp-for="Organization.Website" placeholder="Website">
                                         <label for="inputWebsite">Website</label>
+                                        <span asp-validation-for="Organization.Website" class="text-danger"></span>
                                     </div>
                                 </div>
                                 
                                 <div class="col-md-12">
                                     <div class="form-label-group">
-                                        <input type="text" id="inputDescription" asp-for="Organization.Description" class="form-control" placeholder="Description*" required=""></input>
+                                        <textarea rows="3" type="text" id="inputDescription" asp-for="Organization.Description" class="form-control" placeholder="Description*" required=""></textarea>
                                         <label for="inputDescription">Description*</label>
+                                        <span asp-validation-for="Organization.Description" class="text-danger"></span>
                                     </div>
                                 </div>
                                
@@ -72,35 +76,40 @@
                                     <div class="form-label-group">
                                         <input type="text" id="inputTwitterusername" asp-for="Organization.TwitterUsername" class="form-control" placeholder="Twitter Username">
                                         <label for="inputTwitterusername">Twitter Username</label>
+                                        <span asp-validation-for="Organization.TwitterUsername" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-label-group">
                                         <input type="text" id="inputGitHubusername" asp-for="Organization.GitHubUsername" class="form-control" placeholder="GitHub Username">
                                         <label for="inputGitHubusername">GitHub Username</label>
+                                        <span asp-validation-for="Organization.GitHubUsername" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-label-group">
                                         <input type="text" id="inputFacebookusername" asp-for="Organization.FacebookUsername" class="form-control" placeholder="Facebook Username">
                                         <label for="inputFacebookusername">Facebook Username</label>
+                                        <span asp-validation-for="Organization.FacebookUsername" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-label-group">
                                         <input type="text" id="inputInstagramusername" asp-for="Organization.InstagramUsername" class="form-control" placeholder="Instagram Username">
                                         <label for="inputInstagramusername">Instagram Username</label>
+                                        <span asp-validation-for="Organization.InstagramUsername" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-label-group">
                                         <input type="text" id="inputMediumusername" asp-for="Organization.MediumUsername" class="form-control" placeholder="Medium Username">
                                         <label for="inputMediumusername">Medium Username</label>
+                                        <span asp-validation-for="Organization.MediumUsername" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-12 text-right">
                                     <button type="submit" class="btn btn-primary btn-lg">
-                                        Submit
+                                        Edit Organization
                                     </button>
                                 </div>
                             </div>
diff --git a/src/EventHub.Web/Pages/Organizations/New.cshtml b/src/EventHub.Web/Pages/Organizations/New.cshtml
index e7c58d4..0af82e2 100644
--- a/src/EventHub.Web/Pages/Organizations/New.cshtml
+++ b/src/EventHub.Web/Pages/Organizations/New.cshtml
@@ -35,6 +35,7 @@
                                                 <p class="mb-3">Photo size should be <span class="text-primary">max @(OrganizationConsts.MaxProfilePictureFileSize / (1024 * 1024)) MB.</span></p>
                                                 <input type="file" id="Organization_ProfilePictureFile" asp-for="Organization.ProfilePictureFile" class="form-control border-0" hidden>
                                                 <label id="upload-label" for="Organization_ProfilePictureFile" class="btn btn-primary btn-lg text-white">Upload</label>
+                                                <span asp-validation-for="Organization.ProfilePictureFile" class="text-danger"></span>
                                             </div>
                                         </div>
                                     </div>
@@ -44,6 +45,7 @@
                                     <div class="form-label-group">
                                         <input type="text" id="inputName" asp-for="Organization.Name" class="form-control" placeholder="Name *" required="">
                                         <label for="inputName">Name*</label>
+                                        <span asp-validation-for="Organization.Name" class="text-danger"></span>
                                     </div>
                                 </div>
 
@@ -51,53 +53,61 @@
                                     <div class="form-label-group">
                                         <input type="text" id="inputDisplayname" asp-for="Organization.DisplayName" class="form-control" placeholder="Display Name*" required="">
                                         <label for="inputDisplayname">Display Name*</label>
+                                        <span asp-validation-for="Organization.DisplayName" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-12">
                                     <div class="form-label-group">
-                                        <input type="text" id="inputDescription" asp-for="Organization.Description" class="form-control" placeholder="Description*" required="">
+                                        <textarea rows="3" type="text" id="inputDescription" asp-for="Organization.Description" class="form-control" placeholder="Description*" required=""></textarea>
                                         <label for="inputDescription">Description*</label>
+                                        <span asp-validation-for="Organization.Description" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-label-group">
                                         <input type="text" id="inputWebsite" class="form-control" asp-for="Organization.Website" placeholder="Website">
                                         <label for="inputWebsite">Website</label>
+                                        <span asp-validation-for="Organization.Website" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-label-group">
                                         <input type="text" id="inputTwitterusername" asp-for="Organization.TwitterUsername" class="form-control" placeholder="Twitter Username">
                                         <label for="inputTwitterusername">Twitter Username</label>
+                                        <span asp-validation-for="Organization.TwitterUsername" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-label-group">
                                         <input type="text" id="inputGitHubusername" asp-for="Organization.GitHubUsername" class="form-control" placeholder="GitHub Username">
                                         <label for="inputGitHubusername">GitHub Username</label>
+                                        <span asp-validation-for="Organization.GitHubUsername" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-label-group">
                                         <input type="text" id="inputFacebookusername" asp-for="Organization.FacebookUsername" class="form-control" placeholder="Facebook Username">
                                         <label for="inputFacebookusername">Facebook Username</label>
+                                        <span asp-validation-for="Organization.FacebookUsername" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-label-group">
                                         <input type="text" id="inputInstagramusername" asp-for="Organization.InstagramUsername" class="form-control" placeholder="Instagram Username">
                                         <label for="inputInstagramusername">Instagram Username</label>
+                                        <span asp-validation-for="Organization.InstagramUsername" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-6">
                                     <div class="form-label-group">
                                         <input type="text" id="inputMediumusername" asp-for="Organization.MediumUsername" class="form-control" placeholder="Medium Username">
                                         <label for="inputMediumusername">Medium Username</label>
+                                        <span asp-validation-for="Organization.MediumUsername" class="text-danger"></span>
                                     </div>
                                 </div>
                                 <div class="col-md-12 text-right">
                                     <button type="submit" class="btn btn-primary btn-lg">
-                                        Submit Organization
+                                        Create Organization
                                     </button>
                                 </div>
                             </div>