contact form with tailwind

What are you most proud of, and what would you do differently next time?

In the process of completing this form, I will try to find the best solution. In this process, I learned a lot.

What challenges did you encounter, and how did you overcome them?

In the process of completing this form, I encountered two problems, which made me a little entangled. I don't have a good solution. Here are the problems I encountered and the solutions

1. The input tag is added with required. At this time, the pseudo-class selector :invalid will take effect directly during initialization, resulting in an error message being displayed as soon as the page is opened. I think this is not good.

   • Method 1: Add the novalidate attribute to the form, and then check it yourself through js. This is too troublesome.
   • Method 2: Use :foucus + :invalid to display the error message, which is only displayed when focused.

2. email has two checks required and type=email. Any failure in any check will make the pseudo-class :invalid effective, and there is a requirement to check the email format in the requirements. So here I can only use js to distinguish the check type and modify the corresponding text.

For the above problems, if you have a better method, please let me know, thank you