Why is a red border shown by default in a form?

Question

I have following HTML:

  <form ng-submit="submitForm()"  method="POST">
    <div class="formRow"><input type="email" placeholder="Email" ng-model="form.emailId"  name="email" required></div>
    <button type="submit" ngclick="Submit">Signin</button>

It is showing a red border by default. Why?

When I inspect the HTML in Firefox I see this:

<input type="email" required="" name="email" ng-model="form.emailId" placeholder="Email" class="ng-pristine ng-invalid ng-invalid-required ng-valid-email">

Any idea?

Something's obviously altering the output within the JS maybe? — Lee, Jan 13 '15 at 13:17
A suspect its claiming the form input isn't valid. does this happen just on page load? do you have any code that's firing the validate on the firm? — atmd, Jan 13 '15 at 13:17
You have several `class` attributes there that could have been styled by some css code. Check freefaller's opinion — Damilola Olowookere, Jan 13 '15 at 13:18
Duplicate - http://stackoverflow.com/questions/22443487/angular-automatically-add-ng-invalid-class-on-required-fields — kgu87, Jan 13 '15 at 13:20

score 1 · Answer 1 · answered Jan 13 '15 at 13:26

1

That could be that this is browser highlighting. In HTML5 we have form input validation, and your input has type email. That is why if the content does not match email field requirements there could appear red border.

To prevent this set novalidate attribute to the form.

<form novalidate action="/some/action" method="POST"></form>

Hope that helps somehow.

novalidate on W3C.

answered Jan 13 '15 at 13:26

devdRew

4,393
3
24
33

what about validation ?? – Hitu Bansal Jan 13 '15 at 13:28
empty validation will go away in this case – Hitu Bansal Jan 13 '15 at 13:29
It won't go away, it will still be validated but no browser specific action will take place. I mean no specific decoration. – devdRew Jan 13 '15 at 13:30
i am not able to see message or red border after that. if i submit blank form – Hitu Bansal Jan 13 '15 at 13:34
1

In a controller you can check if form is valid or not: add name to you form, f.e `LoginForm`, then in submit method check: `if ($scope.LoginForm.$invalid) { return null; }`... or something like that... – devdRew Jan 13 '15 at 14:10
By the way what version of Angular you're using? – devdRew Jan 13 '15 at 14:27

Why is a red border shown by default in a form?

1 Answers1