Add Data Input Validation

Author: 0010SS

Models/Classes.cs

@@ -6,10 +6,15 @@ namespace CMS.Models
     public class Classes
     {
         [Key]
+
         public int ID { get; set; }
-        [Required]
+
+        [Required(ErrorMessage = "Period is required.")]
+        [Range(1, 10, ErrorMessage = "Period must be between 1 and 10.")]
         public int period { get; set; }
-        [Required]
+
+        [Required(ErrorMessage = "Class name is required.")]
+        [StringLength(100, ErrorMessage = "Class name can't be longer than 100 characters.")]
         public string className { get; set; }
     }
 }

Views/Record/AddClass.cshtml

@@ -1,9 +1,9 @@
 @model Classes
 
 <div class="min-h-screen text-center">
-    <p class="dark:text-white font-bold tect-2xl md:text-5xl justify-center items-center pb-10">Add Classes</p>
+    <p class="dark:text-white font-bold tect-2xl md:text-5xl justify-center items-center pb-10">Add a Class</p>
 
-    <form method="post">
+    <form method="post" asp-controller="Record" asp-action="AddClass">
         <table class="min-w-full bg-transparent shadow-md rounded-lg text-center">
             <thead>
                 <tr>
@@ -14,27 +14,29 @@
             <tbody>
                 <tr class="border-t">
                     <td class="py-2 px-4">
-                        <input asp-for="period" type="text" class="form-control w-full bg-transparent rounded px-2 py-1 text-white placeholder-white::placeholder text-center outline-none" placeholder="Enter period" />
+                        <input asp-for="period" type="text" class="form-control w-full bg-transparent rounded px-2 py-1 dark:text-white placeholder-white::placeholder text-center outline-none" placeholder="Enter period" />
+                        <span asp-validation-for="period" class="text-danger"></span>
                     </td>
                     <td class="py-2 px-4">
-                        <input asp-for="className" type="text" class="form-control w-full bg-transparent rounded px-2 py-1 text-white placeholder-white::placeholder text-center outline-none" placeholder="Enter name" />
+                        <input asp-for="className" type="text" class="form-control w-full bg-transparent rounded px-2 py-1 dark:text-white placeholder-white::placeholder text-center outline-none" placeholder="Enter name" />
+                        <span asp-validation-for="className" class="text-danger"></span>
                     </td>
                 </tr>
             </tbody>
         </table>
 
         <div class="flex items-center justify-center mt-2 f">
             <div class="text-center mt-6 inline-flex">
-                <button type="submit" class="text-white border border-white bg-transparent font-semibold hover:bg-gray-500 hover:text-gray-800 py-2 px-4 rounded items-center justify-center transition duration-100 ease-in-out">
-                    <i class="bi bi-plus-circle mr-2"> </i> Add to Timetable
+                <button type="submit" class="dark:text-white border dark:border-white bg-transparent font-semibold hover:bg-gray-500 hover:text-gray-800 py-2 px-4 rounded items-center justify-center transition duration-100 ease-in-out">
+                    Add to Timetable
                 </button>
             </div>
 
             <div class="w-10"> </div>
 
             <div class="text-center mt-6 inline-flex">
                 <a asp-controller="Record" asp-action="TimeTable" class="text-gray-400 border border-gray-400 bg-transparent font-semibold hover:bg-gray-500 hover:text-gray-800 py-2 px-4 rounded items-center justify-center transition duration-100 ease-in-out">
-                    <i class="bi bi-plus-circle mr-2"> </i> Back to Timetable
+                    Back to Timetable
                 </a>
             </div>
         </div>