Angularjs email validation without required

Question

Title tells the problem shortly, I have a few email fields like so:

Email 1: <input type="email" name="email1" ng-model="emails.email1" />
<br />
Email 2: <input type="email" name="email2" ng-model="emails.email2" />

I am using following css to see the result:

input[type="email"].ng-invalid.ng-dirty {
    background-color: #FA787E;
  }

The problem is, validation doesn't fire unless I add required attribute. Inputs take classes "ng-valid ng-touched ng-dirty" when I input abc.

I don't want to put required attribute because I want them to be optional and be validated only if a user wants to fill an e-mail address. Is there a workaround for that?

Somebody downvotes us all but doesn't have time to leave a comment? (Not to you blackhole, I'm trying to prepare a fiddle) — Kuzgun, Oct 09 '14 at 19:11
It works with fiddle, I couldn't find what breaks it in actual code yet. Thanks @Blackhole for checking. — Kuzgun, Oct 09 '14 at 19:24
It says that I shouldn't delete the question because it has answers when I try to delete it. — Kuzgun, Oct 09 '14 at 21:00

score -1 · Answer 1 · answered Oct 09 '14 at 19:05

-1

In Angular 1.3 this is better supported. See the following page for details: http://www.yearofmoo.com/2014/09/taming-forms-in-angularjs-1-3.html#html5-validators-and-parse-errors

answered Oct 09 '14 at 19:05

Malevolence

1,857
12
9

score -1 · Answer 2 · answered Oct 09 '14 at 19:08

You should be able to leverage the native angular validation methods:

For example with a form name of "form"

form.email1.$error.emails.email1
form.email2.$error.emails.email2

And the data methods:

{{!!form.$error.emails.email1}}
{{!!form.$error.emails.email2}}

From there, just mark the fields dirty and your styling should be applied.

Angularjs email validation without required

2 Answers2