Validating email in the textbox using angularjs

Question

I have 2 textboxes and a submit button in a form. One which takes First Name as input and other one as Email. I am trying to validate the form by using angularjs. For the first name field, I apply

<div ng-class="{ 'has-error' : creatProspectSubmit && prospectCreate.FirstName.$error.required }"

This works perfectly and it highlights the textbox when there is no name in it. Another validation which I have added in the textbox is

<input type="text" name="FirstName" ng-model="FirstName" ng-required="true">

So when I click on submit, the textbox gets highlighted and the form does not gets submitted.

There is a different validation for email field.

<div ng-class="{ 'has-error' : creatProspectSubmit && prospectCreate.Email.$error.required || EmailValidate || prospectCreate.Email.$error.email}">

So this works good and it highlights the textbox if it satisfies the above condition. Other validation is

<input type="email" name="Email" ng-model="Email" ng-required="true">

The problem here is it highlights the textbox if the email address is wrong but when I click on submit it accepts the value maybe it is because ng-required = "true" is satisfied. How can I stop the form from submitting without writing any code in the submit button.

I tried adding the below code in the textbox but it disappears the textbox of Email.

ng-if = "creatProspectSubmit && prospectCreate.Email.$error.required || EmailValidate || prospectCreate.Email.$error.email"

I am struggling on this from 2 days. I do not want to write any code on submit button. All the validations should be done in the textbox itself. Any help would be appreciated.

One thing you can do is to disable the submit button using ng-disabled if your condition is not satisfied. You can add your condition to ng-disabled, which should return false/true, based on which it will enable/disable the submit button. — Zee
– Zee, Commented Apr 10, 2015 at 5:23
@RonakShah.. Ok. Then can you plz provide a plunkr or fiddle.. — Zee
– Zee, Commented Apr 10, 2015 at 5:28
I fazed a similar issue an resorted to using ng-pattern="regex_to_validate_email_input", this took care of the problem. — Jax
– Jax, Commented Apr 10, 2015 at 8:14

David Rubin · Accepted Answer · 2015-04-10 07:16:20Z

0

Maybe you could add boolean validation vars to your scope, so that on your submit button you could add ng-disable='!input1valid || !input2valid' this way you'll get more control on when to submit or not

answered Apr 10, 2015 at 7:16

David Rubin

1237 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Validating email in the textbox using angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related