Show javascript popup error message in angularjs form validation

Question

I am trying to show javascript popup error message when processing form inputs.But i cant figure it correctly.Here is my html file

<form name="form" ng-app ng-submit="register(user)">
 <div class="controls">
        <input type="email" name="email" ng-model="user.email" required />
        <span class="help-inline" ng-show="submitted && form.email.$error.required">Required</span>
        <span class="help-inline" ng-show="submitted && form.email.$error.email">Invalid email</span>
    </div>
    <div class="controls">
        <input type="text" name="name" ng-model="user.name" required />
        <span class="help-inline" ng-show="submitted && form.name.$error.required">Required</span>
        <span class="help-inline" ng-show="submitted && form.name.$error.email">Invalid email</span>
    </div>
</form>

In my controller i want to populate javascript popup error message.Here is my controller

angular.module('starter.controllers',[])

    .controller('DashCtrl', function($scope) {


        $scope.register=function(user){
          //this will work 
           alert(user.email)
          //this wont work
           if(user.email=="")
            alert("Email required");
        }

    })

Thanks in advance.

With type="email" the model will not be populated unless the input field actually contains a valid email, so user.email will be undefined and not "". — ivarni
– ivarni, Commented Sep 4, 2014 at 5:38

Klaster_1 Нет войне · Accepted Answer · 2014-09-04 05:54:26Z

1

First of all, you need valid form inputs to execute ng-submit, unti you call register programatically. This means that user.email won't ever be equal to "".

Second, look at the standard HTML5 validation. It will show "Email is invalid" on form submit.

Third, advanced validation can be done through custom directives that have access to ngModelController and element. This allows to use HTML5 validation API, or add custom error handling (like alert) via $watch or $parsers and $formatters. AngularJS provides concern separation mechanism, consider using it.

answered Sep 4, 2014 at 5:54

Klaster_1 Нет войне

12.2k9 gold badges65 silver badges75 bronze badges

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

1 Comment

shamon shamsudeen Over a year ago

Thanks for your answer , i used form validation methods in angular docs.

Collectives™ on Stack Overflow

Show javascript popup error message in angularjs form validation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related