06_react/uebungen/u17-18_validator-blur/package.json

@@ -14,7 +14,8 @@
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
     "react-icons": "^5.7.0",
-    "react-router-dom": "^7.18.4"
+    "react-router-dom": "^7.18.5",
+    "validator": "^13.15.35"
   },
   "devDependencies": {
     "@types/react": "^19.3.0",

06_react/uebungen/u17-18_validator-blur/src/components/forms/FormContact.jsx

@@ -1,15 +1,17 @@
 import { useState } from 'react';
 import validate from '../../utils/validators/validate';
 
+const INITIAL_FORM_DATA = {
+  firstname: '', //
+  lastname: '',
+  email: '',
+  message: '',
+};
+
 const FormContact = (props) => {
   // const { } = props;
 
-  const [formData, setFormData] = useState({
-    firstname: '', //
-    lastname: '',
-    email: '',
-    message: '',
-  });
+  const [formData, setFormData] = useState(INITIAL_FORM_DATA);
 
   const [errors, setErrors] = useState({});
 
@@ -25,12 +27,7 @@ const FormContact = (props) => {
       console.log('Form submitted ....');
       // TODO: send over AJAX/Fetch
       form.reset();
-      setFormData({
-        firstname: '', //
-        lastname: '',
-        email: '',
-        message: '',
-      });
+      setFormData(INITIAL_FORM_DATA);
       setErrors({});
     } else {
       console.warn('Form submit error');
@@ -47,6 +44,23 @@ const FormContact = (props) => {
     // console.log('Formdata', formData);
   };
 
+  const handleBlur = (e) => {
+    const { name, value } = e.target;
+    const validationErrors = validate({ ...formData, [name]: value });
+
+    setErrors((state) => {
+      const nextErrors = { ...state };
+
+      if (validationErrors[name]) {
+        nextErrors[name] = validationErrors[name];
+      } else {
+        delete nextErrors[name];
+      }
+
+      return nextErrors;
+    });
+  };
+
   return (
     <form className="m-form-contact form-contact" noValidate onSubmit={handleSubmit}>
       <div className="row">
@@ -62,6 +76,7 @@ const FormContact = (props) => {
               className={`form-control input-firstname ${errors.firstname ? 'is-invalid' : ''}`}
               value={formData.firstname}
               onChange={handleChange}
+              onBlur={handleBlur}
             />
             <div className="valid-feedback">OK</div>
             <div className="invalid-feedback">{errors?.firstname}</div>
@@ -79,6 +94,7 @@ const FormContact = (props) => {
               className={`form-control input-lastname ${errors.lastname ? 'is-invalid' : ''}`}
               value={formData.lastname}
               onChange={handleChange}
+              onBlur={handleBlur}
             />
             <div className="valid-feedback">OK</div>
             <div className="invalid-feedback">{errors?.lastname}</div>
@@ -99,6 +115,7 @@ const FormContact = (props) => {
               className={`form-control input-email ${errors.email ? 'is-invalid' : ''}`}
               value={formData.email}
               onChange={handleChange}
+              onBlur={handleBlur}
             />
             <div className="valid-feedback">OK</div>
             <div className="invalid-feedback">{errors?.email}</div>
@@ -119,7 +136,8 @@ const FormContact = (props) => {
               id="textarea-message"
               className={`form-control textarea-message ${errors.message ? 'is-invalid' : ''}`}
               value={formData.message}
-              onChange={handleChange}></textarea>
+              onChange={handleChange}
+              onBlur={handleBlur}></textarea>
             <div className="valid-feedback">OK</div>
             <div className="invalid-feedback">{errors?.message}</div>
           </div>

06_react/uebungen/u17-18_validator-blur/src/utils/validators/validate.js

@@ -1,25 +1,34 @@
+import validator from 'validator';
+
 const validate = (formData) => {
   const errors = {};
-  const emailRegEx = new RegExp(
-    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-  );
+  const firstname = formData.firstname.trim();
+  const lastname = formData.lastname.trim();
+  const email = formData.email.trim();
+  const message = formData.message.trim();
 
-  if (!formData.firstname) {
+  if (validator.isEmpty(firstname)) {
     errors.firstname = 'Firstname is required';
+  } else if (!validator.isLength(firstname, { min: 2, max: 50 })) {
+    errors.firstname = 'Firstname must be between 2 and 50 characters';
   }
 
-  if (!formData.lastname) {
+  if (validator.isEmpty(lastname)) {
     errors.lastname = 'Lastname is required';
+  } else if (!validator.isLength(lastname, { min: 2, max: 60 })) {
+    errors.lastname = 'Lastname must be between 2 and 60 characters';
   }
 
-  if (!formData.email) {
+  if (validator.isEmpty(email)) {
     errors.email = 'Email is required';
-  } else if (!emailRegEx.test(formData.email)) {
+  } else if (!validator.isEmail(email)) {
     errors.email = 'Email is invalid';
   }
 
-  if (!formData.message) {
+  if (validator.isEmpty(message)) {
     errors.message = 'Message is required';
+  } else if (!validator.isLength(message, { min: 10, max: 1000 })) {
+    errors.message = 'Message must be between 10 and 1000 characters';
   }
 
   return errors;