Add rules and error handling to book form

client/src/pages/Book.tsx

 import React from "react";
 import { Button, Col, Container, Form, Row } from "react-bootstrap";
 import { Controller, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import validator from "validator";
 import Divider from "../components/Divider";
 import Modal from "../components/Modal";
 
@@ -15,17 +17,20 @@ type FormData = {
 };
 
 function Book() {
-  const { control, handleSubmit } = useForm<FormData>();
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormData>({ mode: "onBlur" });
+  const { t, i18n } = useTranslation();
   const onSubmit = (data: FormData) => console.log(data);
   return (
     <Container className="pt-5">
       <Row>
         <Col xs={{ span: 10, offset: 1 }}>
           <Modal>
-            <h1 className="text-center">Book a Boat!</h1>
-            <p className="text-center">
-              Please enter the information for your booking
-            </p>
+            <h1 className="text-center">{t("book.title")}</h1>
+            <p className="text-center">{t("book.subtitle")}</p>
             <Divider />
             <Form onSubmit={handleSubmit(onSubmit)}>
               <Controller
@@ -33,84 +38,142 @@ function Book() {
                 control={control}
                 render={({ field }) => (
                   <div className="mb-2">
-                    <Form.Label>Boat name</Form.Label>
+                    <Form.Label>{t("book.labelBoatName")}</Form.Label>
                     <Form.Control type="text" {...field} />
                   </div>
                 )}
+                rules={{
+                  required: {
+                    value: true,
+                    message: t("book.messages.required", {
+                      val: t("book.labelBoatName"),
+                    }),
+                  },
+                }}
               />
               <Controller
                 name="startTime"
                 control={control}
                 render={({ field }) => (
                   <div className="mb-2">
-                    <Form.Label>Start time</Form.Label>
+                    <Form.Label>{t("book.labelStartTime")}</Form.Label>
                     <Form.Control type="text" {...field} />
                   </div>
                 )}
+                rules={{
+                  required: {
+                    value: true,
+                    message: t("book.messages.required", {
+                      val: t("book.labelStartTime"),
+                    }),
+                  },
+                  pattern: {
+                    value: /(((0|1)\d)|(2[0-3])):[0-5]\d/,
+                    message: t("book.messages.invalidTime", {
+                      val: t("book.labelStartTime"),
+                    }),
+                  },
+                }}
               />
               <Controller
                 name="estimatedEndTime"
                 control={control}
                 render={({ field }) => (
                   <div className="mb-2">
-                    <Form.Label>Estimated end time</Form.Label>
+                    <Form.Label>{t("book.labelEstimatedEndTime")}</Form.Label>
                     <Form.Control type="text" {...field} />
                   </div>
                 )}
+                rules={{
+                  required: {
+                    value: true,
+                    message: t("book.messages.required", {
+                      val: t("book.labelEstimatedEndTime"),
+                    }),
+                  },
+                  pattern: {
+                    value: /(((0|1)\d)|(2[0-3])):[0-5]\d/,
+                    message: t("book.messages.invalidTime", {
+                      val: t("book.labelEstimatedEndTime"),
+                    }),
+                  },
+                }}
               />
               <Controller
                 name="destination"
                 control={control}
                 render={({ field }) => (
                   <div className="mb-2">
-                    <Form.Label>Destination</Form.Label>
-                    <Form.Control type="text" {...field} />
-                  </div>
-                )}
-              />
-              <Controller
-                name="name"
-                control={control}
-                render={({ field }) => (
-                  <div className="mb-2">
-                    <Form.Label>Destination</Form.Label>
+                    <Form.Label>{t("book.labelDestination")}</Form.Label>
                     <Form.Control type="text" {...field} />
                   </div>
                 )}
+                rules={{
+                  required: {
+                    value: true,
+                    message: t("book.messages.required", {
+                      val: t("book.labelDestination"),
+                    }),
+                  },
+                }}
               />
               <Controller
                 name="email"
                 control={control}
                 render={({ field }) => (
                   <div className="mb-2">
-                    <Form.Label>Your Mail</Form.Label>
+                    <Form.Label>{t("book.labelEmail")}</Form.Label>
                     <Form.Control type="email" {...field} />
                   </div>
                 )}
+                rules={{
+                  required: {
+                    value: true,
+                    message: t("book.messages.required", {
+                      val: t("book.labelEmail"),
+                    }),
+                  },
+                  validate: (value: string) =>
+                    validator.isEmail(value) ||
+                    t("book.messages.invalidEmail").toString(),
+                }}
               />
               <Controller
                 name="name"
                 control={control}
                 render={({ field }) => (
                   <div className="mb-2">
-                    <Form.Label>Your Name</Form.Label>
+                    <Form.Label>{t("book.labelName")}</Form.Label>
                     <Form.Control type="text" {...field} />
                   </div>
                 )}
+                rules={{
+                  required: {
+                    value: true,
+                    message: t("book.messages.required", {
+                      val: t("book.labelName"),
+                    }),
+                  },
+                }}
               />
               <Controller
                 name="annotations"
                 control={control}
                 render={({ field }) => (
                   <div className="mb-2">
-                    <Form.Label>Annotations (optional)</Form.Label>
+                    <Form.Label>{t("book.labelAnnotations")}</Form.Label>
                     <Form.Control as="textarea" type="text" {...field} />
                   </div>
                 )}
               />
               <Button type="submit" variant="secondary" className="mt-2 w-100">
-                Book this boat!
+                {t("book.buttonBookBoat")}
               </Button>
+              <div className="mt-2">
+                {Object.values(errors).map((error) => (
+                  <p className="m-0 text-center text-danger">{error.message}</p>
+                ))}
+              </div>
             </Form>
           </Modal>
         </Col>