Браузеры ведут себя по-разному для сообщений об ошибках формы HTML5

Question

Я создал страницу входа. он имеет форму с полями имени пользователя и пароля. Имя пользователя должно быть текстом с типом электронной почты и паролем, который будет содержать текст с паролем типа, который должен удовлетворять шаблону регулярного выражения.

Все работает как ожидалось. проблема, с которой я сталкиваюсь, заключается в том, что когда пользователь вводит неверное имя пользователя, сообщение об ошибке отображается по-разному в разных браузерах, как показано ниже.

Internet Explorer

Google Chrome

Mozilla Firefox

это полностью зависит от поведения браузера, как они обрабатывают HTML5? возможно ли иметь общий дизайн для сообщений об ошибках без написания большого количества кода.

Заранее спасибо

Answer 1

Я думаю, что вы не можете изменить поведение по умолчанию, но вы можете использовать угловые проверки для этого.

Что-то вроде этого:

<form name="signUpForm"> 
      <div> 
       <input name="email" type="email" required autocomplete="off" ng-model="formData.Email" /> 
       <div class="error-message" ng-show="signUpForm.email.$error.required">UserName is required</div> 
       <div class="error-message" ng-show="signUpForm.email.$error.email">Not Valid Email</div> 
      </div> 
     </form> 

тогда, вы можете настроить класс сообщения об ошибке, как вы хотите. , чтобы показывать сообщения только при отправке формы, необходимо внести некоторые изменения, но вы можете получить эту идею.

увидеть это: Angular Forms

и это: Angular Forms Validation

для получения дополнительной информации.