06_react/unterricht/tag37/02_react-with-forms/src/components/forms/FormContact.jsx

@@ -3,23 +3,33 @@ import { useState } from 'react';
 
 const FormContact = (props) => {
   // const { } = props;
-  const FORM_DATA = {
+  const INITIAL_FORM_DATA = {
     firstname: '',
     lastname: '',
     email: '',
     message: '',
   };
 
-  const [formData, setFormData] = useState(FORM_DATA);
-
+  // Hooks
+  const [formData, setFormData] = useState(INITIAL_FORM_DATA);
+  const [errors, setErrors] = useState({});
   // EventHandlers
   const handleSubmit = (e) => {
     e.preventDefault();
+    const form = e.currentTarget;
 
     const errors = validate(formData);
 
-    // AJAX/FETCH send to server
-    console.log('FormData: ', formData);
+    if (Object.keys(errors).length === 0) {
+      // AJAX/FETCH send to server
+      console.log('FormData: ', formData);
+      setFormData(INITIAL_FORM_DATA); // reset
+      form.reset(); // not necessary in react
+      setErrors({});
+    } else {
+      console.error('Form submit error');
+      setErrors(errors);
+    }
   };
 
   const handleChange = (e) => {
@@ -40,7 +50,16 @@ const FormContact = (props) => {
             <label htmlFor="input-firstname" className="form-label">
               Firstname
             </label>
-            <input type="text" name="firstname" id="input-firstname" className="form-control" onChange={handleChange} />
+            <input
+              type="text"
+              name="firstname"
+              id="input-firstname"
+              className={`form-control ${errors.firstname ? 'is-invalid' : ''}`}
+              onChange={handleChange}
+              value={formData.firstname}
+            />
+            <div className="valid-feedback">OK</div>
+            <div className="invalid-feedback">{errors?.firstname || 'Error'}</div>
           </div>
         </div>
         <div className="col-12 col-sm-6">
@@ -48,7 +67,14 @@ const FormContact = (props) => {
             <label htmlFor="input-lastname" className="form-label">
               Lastname
             </label>
-            <input type="text" name="lastname" id="input-lastname" className="form-control" onChange={handleChange} />
+            <input
+              type="text"
+              name="lastname"
+              id="input-lastname"
+              onChange={handleChange}
+              className={`form-control ${errors.lastname ? 'is-invalid' : ''}`}
+            />
+            <div className="invalid-feedback">{errors?.lastname || 'Error'}</div>
           </div>
         </div>
       </div>
@@ -58,7 +84,14 @@ const FormContact = (props) => {
             <label htmlFor="input-email" className="form-label">
               Email
             </label>
-            <input type="email" className="form-control" id="input-email" name="email" onChange={handleChange} />
+            <input
+              type="email"
+              id="input-email"
+              name="email"
+              onChange={handleChange}
+              className={`form-control ${errors.email ? 'is-invalid' : ''}`}
+            />
+            <div className="invalid-feedback">{errors?.email || 'Error'}</div>
           </div>
         </div>
       </div>
@@ -73,8 +106,9 @@ const FormContact = (props) => {
               id="textarea-message"
               cols="30"
               rows="5"
-              className="form-control"
-              onChange={handleChange}></textarea>
+              onChange={handleChange}
+              className={`form-control ${errors.message ? 'is-invalid' : ''}`}></textarea>
+            <div className="invalid-feedback">{errors?.message || 'Error'}</div>
           </div>
         </div>
       </div>

06_react/unterricht/tag37/02_react-with-forms/src/components/forms/react-hook-form/FormContact.jsx

@@ -0,0 +1,125 @@
+import validate from '../../../utils/validators/validate';
+import { useState } from 'react';
+
+const FormContact = (props) => {
+  // const { } = props;
+  const INITIAL_FORM_DATA = {
+    firstname: '',
+    lastname: '',
+    email: '',
+    message: '',
+  };
+
+  // Hooks
+  const [formData, setFormData] = useState(INITIAL_FORM_DATA);
+  const [errors, setErrors] = useState({});
+  // EventHandlers
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const form = e.currentTarget;
+
+    const errors = validate(formData);
+
+    if (Object.keys(errors).length === 0) {
+      // AJAX/FETCH send to server
+      console.log('FormData: ', formData);
+      setFormData(INITIAL_FORM_DATA); // reset
+      form.reset(); // not necessary in react
+      setErrors({});
+    } else {
+      console.error('Form submit error');
+      setErrors(errors);
+    }
+  };
+
+  const handleChange = (e) => {
+    // console.log('Event: ', e);
+    const { name, value } = e.target;
+
+    setFormData((state) => ({ ...state, [name]: value }));
+
+    // console.log({ [e.target.name]: e.target.value });
+    // console.log('formData: ', formData);
+  };
+
+  return (
+    <form className="m-form-contact form-contact" noValidate={true} onSubmit={handleSubmit}>
+      <div className="row">
+        <div className="col-12 col-sm-6">
+          <div className="mb-3">
+            <label htmlFor="input-firstname" className="form-label">
+              Firstname
+            </label>
+            <input
+              type="text"
+              name="firstname"
+              id="input-firstname"
+              className={`form-control ${errors.firstname ? 'is-invalid' : ''}`}
+              onChange={handleChange}
+              value={formData.firstname}
+            />
+            <div className="valid-feedback">OK</div>
+            <div className="invalid-feedback">{errors?.firstname || 'Error'}</div>
+          </div>
+        </div>
+        <div className="col-12 col-sm-6">
+          <div className="mb-3">
+            <label htmlFor="input-lastname" className="form-label">
+              Lastname
+            </label>
+            <input
+              type="text"
+              name="lastname"
+              id="input-lastname"
+              onChange={handleChange}
+              className={`form-control ${errors.lastname ? 'is-invalid' : ''}`}
+            />
+            <div className="invalid-feedback">{errors?.lastname || 'Error'}</div>
+          </div>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col">
+          <div className="mb-3">
+            <label htmlFor="input-email" className="form-label">
+              Email
+            </label>
+            <input
+              type="email"
+              id="input-email"
+              name="email"
+              onChange={handleChange}
+              className={`form-control ${errors.email ? 'is-invalid' : ''}`}
+            />
+            <div className="invalid-feedback">{errors?.email || 'Error'}</div>
+          </div>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col">
+          <div className="mb-3">
+            <label htmlFor="textarea-message" className="form-label">
+              Message
+            </label>
+            <textarea
+              name="message"
+              id="textarea-message"
+              cols="30"
+              rows="5"
+              onChange={handleChange}
+              className={`form-control ${errors.message ? 'is-invalid' : ''}`}></textarea>
+            <div className="invalid-feedback">{errors?.message || 'Error'}</div>
+          </div>
+        </div>
+      </div>
+      <div className="row">
+        <div className="col">
+          <button type="submit" className="btn btn-dark button-send-contact">
+            Send
+          </button>
+        </div>
+      </div>
+    </form>
+  );
+};
+export default FormContact;

06_react/unterricht/tag37/02_react-with-forms/src/pages/ContactPage.jsx

@@ -1,4 +1,4 @@
-import FormContact from '../components/forms/FormContact';
+import FormContact from '../components/forms/react-hook-form/FormContact';
 
 function ContactPage() {
   return (

06_react/unterricht/tag37/02_react-with-forms/src/utils/validators/validate.js

@@ -25,3 +25,5 @@ const validate = (formData) => {
 
   return errors;
 };
+
+export default validate;