fix validation error

Author: Dagim-Daniel

Form-Controls/index.html

@@ -18,7 +18,9 @@ <h1>Product Pick</h1>
         <fieldset>
           <legend>Customer Information</legend>
           <label for="name">Name:*</label>
-          <input type="text" id="name" name="name" required pattern="[A-za-z/s]{2,50}"/>
+          <input type="text" id="name" name="name" required pattern="[A-Za-z\s]{2,50}" />
+          <br /> 
+          <span class="error-message">Please enter a valid name (2-50 characters, letters and spaces only).</span>
           <br />
           <label for="email">Email:*</label>
           <input type="email" id="email" name="email" required />

Form-Controls/style.css

@@ -3,7 +3,6 @@
   --ink: color-mix(in oklab, var(--color) 5%, black);
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
-  --line: 1px solid;
   --container: 1280px;
 }
 /* ====== Base Elements ======
@@ -25,14 +24,20 @@ h1 {
 
   text-align: center;
 }
-fieldset{
-  padding:var (--space); 
-  max-width:100%;
-}
-input :invalid
+input:invalid
 {
   border-color:red;
 }
+span {
+  color: grey;
+}
+input:valid
+{
+  border-color:green;
+}
+fieldset:focus-within {
+  border-color:blue;
+}
 footer{
   background-image: linear-gradient(to right, grey, lightgreen);
   width:var(--container);