Can I make different browsers show HTML form error messages the same way?

Question

I have created a login form with username and password fields. Username should be a a text filed with type email and password will be a text filed with type password which need to satisfy a regex pattern.

Everything is working as expected. The issue I am facing is that when the user enters a invalid user name the error message is shown differently across different browsers as shown below.

Internet Explorer

Google Chrome

Mozilla Firefox

Is it possible to have a generic design for the error messages across browsers?

From experience I can tell you that each browser has it's own error message, I however do not know if you can override their messages. — Tapaka, Dec 13 '16 at 08:30
It depends on browser. If you want to display in generic design, you need to use angular way of form validation ttps://docs.angularjs.org/guide/forms (if you are using angularjs) or use third party form-validation plugins. — Paulson Peter, Dec 13 '16 at 08:33
The only way to guarantee a generic design is to implement the validation yourself. But I must ask, is it really a problem? Most people use and stick to one browser, they'll be used to the look of the native error messages. — Ankh, Dec 13 '16 at 08:35
You use a css framework such as bootstrap and get the similar look and feels in all browsers — w.Bala, Dec 13 '16 at 08:37
[setCustomValidity()](https://msdn.microsoft.com/en-in/library/windows/apps/hh441292.aspx) method of JavaScript may help you! — kiner_shah, Dec 13 '16 at 09:21

score 0 · Answer 1 · answered Dec 13 '16 at 09:56

I think you cannot modify the default behavior, but You can use angular validation for that.

Something like this:

<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>

then, you can customize error-message class as you want. in order to show messages only when posting the form, some modifications need to be made, but you can get the idea.

see this: Angular Forms

and this: Angular Forms Validation

for more info.

Can I make different browsers show HTML form error messages the same way?

1 Answers1