1. Почему Вы решили, что pattern это тег, а input это поле? pattern - это атрибут тега input.
2. Для валидации email есть input соответственного типа:
<input type="email">
но можно конечно и pattern добавить и обязательность заполнения
<input type="email" pattern="([A-z0-9_.-]{1,})@([A-z0-9_.-]{1,}).([A-z]{2,8})" required>
Но так как на сервере все равно надо все это валидировать не вижу особого смысла. Лучше просто на клиенте делать простые проверки, type="email" достаточно, а потом отправлять ajax и валидировать. Не надо будет дважды одно и то же реализовывать и заботиться, что бы работало идентично.