AngularJS form validation issues

Question

I am trying to do a simple form validation using angular js. But it doesnt seems to work and I am not getting what I am missing.

HTML

<form role="form" class="ng-pristine ng-valid" name="registerForm">
                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" placeholder="First Name" name="firstname" type="text"
                                        autofocus="" required ng-class="{'has-error': registerForm.firstname.$invalid}">
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="Last Name" name="lastname" type="text" value="">
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-class="{'has-error': registerForm.email.$dirty}">
                                <div ng-show="registerForm.email.$dirty">Email Invalid</div>
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="Password" name="password" type="password" value="" autocomplete="off">
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="Organization Name" name="organizationName" type="text" value="">
                            </div>
                            <div class="form-group">
                                <select data-ng-options="item.Display for item in OrganizationTypes track by item.Value" data-ng-model="SelectOrganizationType" class="form-control">
                                    <option value="">-Select Organization Type-</option>
                                </select>
                            </div>
                           
                            <input type="button" value="Register" class="btn btn-lg btn-success btn-block" data-ng-click="Submit()" name="btnSubmit"/>
                           
                        </fieldset>
                    </form>

Now the issue is, I am expecting that if I start entering invalid email then it will show me error message "Email Invalid". But that doesn't happen.

Also when i put a debug before submitting blank form, it says "registerForm.$valid = true"

Any guess what am I missing. Any module that i need to include ?

Here is Plunker

possible duplicate of Adding validation to text field from bootstrap or angularjs — ooozguuur
– ooozguuur, Commented Jul 20, 2015 at 14:45

NeoWang · Accepted Answer · 2015-07-20 14:39:36Z

4

First, you need registerForm.email.$error.email to trigger the 'invalid email' alert.

Second, I guess you have to bind these input fields with ng-models, but I am not sure if this is necessary.

One more thing, add 'novalidate' to the form element.

 <div class="form-group">
      <input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-model="" >
      <div ng-show="registerForm.email.$error.email">Email Invalid</div>
 </div>

answered Jul 20, 2015 at 14:39

NeoWang

18.8k24 gold badges87 silver badges134 bronze badges

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

1 Comment

Sumit Over a year ago

We have to bind input fields with no-model.

Daniel Cottone · Accepted Answer · 2015-07-20 14:42:50Z

You are missing a bunch of stuff. First of all, you need to have your fields associated with a model for them to be validated. Second, your syntax for accessing errors is incorrect.

Here is a working plunkr for what you are trying to do.

This is the relevant code:

<body ng-controller="MainCtrl">
  <form role="form" name="registerForm" novalidate>
    <fieldset>
      <div class="form-group">
        <input class="form-control" placeholder="First Name" name="firstname" ng-model="firstname" type="text" autofocus="" ng-class="{'has-error': registerForm.firstname.$error.required}" required />
      </div>
      <div class="form-group">
        <input class="form-control" placeholder="Last Name" name="lastname" ng-model="lastname" type="text" value="">
      </div>
      <div class="form-group">
        <input class="form-control" placeholder="E-Mail" name="email" ng-model="email" type="email" value="" ng-class="{'has-error': registerForm.email.$error.pattern}" ng-pattern="/^\S+@\S+\.\S+$/i" required />
      </div>
      <div class="form-group">
        <input class="form-control" placeholder="Password" name="password" ng-model="password" type="password" value="" autocomplete="off">
      </div>
      <div class="form-group">
        <input class="form-control" placeholder="Organization Name" name="organizationName" ng-model="organizationName" type="text" value="">
      </div>
      <div class="form-group">
        <select data-ng-options="item.Display for item in OrganizationTypes track by item.Value" data-ng-model="SelectOrganizationType" class="form-control">
          <option value="">-Select Organization Type-</option>
        </select>
      </div>

      <input type="button" value="Register" class="btn btn-lg btn-success btn-block" data-ng-click="Submit()" name="btnSubmit" />

    </fieldset>
  </form>

  <div ng-show="registerForm.firstname.$error.required">You must enter a first name.</div>
  <div ng-show="registerForm.email.$error.pattern || registerForm.email.$error.required">Email Invalid</div>

</body>

Thanks, weird that we have to bind it to ng-model to make validation work.

Tarun Dugar · Accepted Answer · 2015-07-23 07:09:28Z

2

Well, I am not sure but I think you also have to use $error with $dirty like this:

<div ng-show="registerForm.email.$dirty && registerForm.email.$error.email">Email Invalid</div>

Also, add novalidate to disable default browser validation like this:

<form role="form" class="ng-pristine ng-valid" name="registerForm" novalidate>

edited Jul 23, 2015 at 7:09

answered Jul 20, 2015 at 14:32

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

2 Comments

aw04 Over a year ago

this is all true whether it alone solves the issue or not, only checking for $dirty will show as soon as you touch the input

Tarun Dugar Over a year ago

@Sumit, can you create a plunker?

Collectives™ on Stack Overflow

AngularJS form validation issues

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related