CODEWITHSUNDEEP
javascriptangularjscordovaionic-framework
shamon shamsudeen
shamon shamsudeen

Reputation: 5858

Show javascript popup error message in angularjs form validation

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.

Upvotes: 0

Views: 8719

Answers (1)

Klaster_1 Нет войне
Klaster_1 Нет войне

Reputation: 12146

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.

Upvotes: 1

Related Questions