Using native validation

In this section, we will add the required validation to the name, email, and reason fields and ensure that the email matches a particular pattern. We will use standard HTML form validation to implement these rules.

Carry out the following steps:

1. In ContactPage.tsx, add a required attribute to the name, email, and reason field editors to add HTML form required validation for these fields:

   <Form method="post">

     <div className={fieldStyle}>

       ...

       <input type="text" id="name" name="name" required />

     </div>

     <div className={fieldStyle}>

       ...

       <input type="email" id="email" name="email" required />

     </div>

     <div className={fieldStyle}>

       ...

       <select id="...