Angular validation error

Question

i have two form of signup and login with code written under single controller with two function called on submit the first form work correctly but the signup always show errors preview here in https://plnkr.co/edit/RS2LVc?p=preview

var app = angular.module('abc', []);
  app.controller('login', function ($scope) {
    scope.LoginValidator = function ($event) {
            if ($scope.LoginForm.$valid) {
                  console.log('Logged In');
            } else {
                        console.log("invalid");
                        if ($scope.LoginForm.Email.$invalid) {
                            $scope.mailRequire = true;
                        }
                        if ($scope.LoginForm.password.$invalid) {
                            $scope.passRequire = true;
                        }
                        $event.preventDefault();
                  }
            };

then second function starts here and shows error

$scope.SignupValidator = function ($event) {

if ($scope.SignupForm.$valid) {
    console.log("Valid");
} else {
    alert('InValid Data');
    if ($scope.SignupForm.Fullname.$invalid) {
        $scope.namerequire = true;
    }
    if ($scope.SignupForm.email.$invalid) {
        $scope.emailrequire = true;
    }
    if ($scope.SignupForm.rollno.$invalid) {
        $scope.rollrequire = true;
    }
    if ($scope.SignupForm.password.$invalid) {
        $scope.passwordrequire = true;
    }
    if ($scope.SignupForm.confirm.$invalid) {
        $scope.confirmrequire = true;
    }
    $event.preventDefault();
}

};
});

score 2 · Answer 1 · answered Aug 24 '17 at 05:53

You have an error in the Radio button, to validate a radio button, it needs a value. so change radio button html to below,

<input type="radio" name='Gender' ng-model="gender" value="male" ng-required="!gender"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Male</span>


<input type="radio" name='Gender' ng-model="gender" value="female" ng-required="!gender"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Female</span>

Documentaion for radio button

Here is a WORKING DEMO

score 1 · Accepted Answer · 2017-08-24T05:44:54.437

I updated the plunkr file please check :-

// Code goes here
var app = angular.module('abc', []);

app.controller('login', function ($scope) {
    $scope.LoginValidator = function ($event) {
        if ($scope.LoginForm.$valid) {
            console.log('Logged In');
        } else {
            console.log("invalid");
            if ($scope.LoginForm.Email.$invalid) {
                $scope.mailRequire = true;
            }
            if ($scope.LoginForm.password.$invalid) {
                $scope.passRequire = true;
            }
            $event.preventDefault();
        }
    };

    $scope.SignupValidator = function ($event) {

        if ($scope.SignupForm.$valid) {
            console.log("Valid");
        } else {
            alert('InValid Data');
            if ($scope.SignupForm.Fullname.$invalid) {
                $scope.namerequire = true;
            }
            if ($scope.SignupForm.email.$invalid) {
                $scope.emailrequire = true;
            }
            if ($scope.SignupForm.rollno.$invalid) {
                $scope.rollrequire = true;
            }
            if ($scope.SignupForm.password.$invalid) {
                $scope.passwordrequire = true;
            }
            if ($scope.SignupForm.confirm.$invalid) {
                $scope.confirmrequire = true;
            }
            $event.preventDefault();
        }
    };
});

/* Styles go here */

<!DOCTYPE html>
<html ng-app="abc">
<head>
    <link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

    <script data-require="bootstrap@*" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
    <script src="script.js"></script>
</head>

<body ng-controller="login">
    <br><br>
    <form id="login-form" action="/home" name="LoginForm" method="get" class="loginform" role="form" novalidate ng-submit="LoginValidator($event)">
        <fieldset>
            <input type="email" name="Email" id="email" tabindex="1" ng-model="login.email" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" placeholder="Email" ng-required="true">
            <span style="color:red; display:block; text-align:center;" ng-show="LoginForm.Email.$dirty && LoginForm.Email.$error.pattern">* Please Enter Valid Email</span>
            <span style="color:red; display:block; text-align:center;" ng-show="mailRequire && !LoginForm.Email.$dirty">* Email required</span>

            <input type="password" name="password" ng-minlength="8" id="password" tabindex="2" ng-model="login.password" placeholder="Password" ng-required="true">
            <div ng-show="LoginForm.password.$dirty && LoginForm.password.$invalid"><small style="color:red; display:block; text-align:center;">* Invalid Password</small></div>
            <span style="color:red; display:block; text-align:center;" ng-show="passRequire && !LoginForm.password.$dirty">* Password required</span>
            <input type="submit" value="LOG IN" />
        </fieldset>
    </form>
    <br><br>

    <form id="Signup-form" name="SignupForm" action="/home" method="get" role="form" novalidate ng-submit="SignupValidator($event)">
        <input type="text" id="fullname" name="Fullname" tabindex="1" placeholder="Full Name" ng-minlength="4" ng-model="signup.name" ng-required="true" />
        <small style="color:red; display:block; text-align:center;" ng-show="SignupForm.Fullname.$error.minlength">* Atleast 4 characters</small>
        <span style="color:red; display:block; text-align:center;" ng-show="namerequire && !SignupForm.Fullname.$dirty">* Name required</span>

        <input type="email" name="email" id="email" tabindex="1" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" placeholder="Email Address" value="" ng-model="signup.email" ng-required="true" />
        <span style="color:red; display:block; text-align:center;" ng-show="SignupForm.email.$dirty && SignupForm.email.$error.pattern">* Please Enter Valid Email</span>
        <span style="color:red; display:block; text-align:center;" ng-show="emailrequire && !SignupForm.email.$dirty">* Email required</span>

        <input type="text" id="rollno" name="rollno" ng-minlength="8" tabindex="1" placeholder="Class Number Eg.(UOS131111)" ng-model="signup.roll" ng-required="true" />
        <span ng-show="SignupForm.rollno.$error.minlength" style="color:red; display:block; text-align:center;">*Invalid Rollno </span>
        <span style="color:red; display:block; text-align:center;" ng-show="rollrequire && !SignupForm.rollno.$dirty">*Roll No required</span>

        <input type="password" name="password" id="password" ng-minlength="8" tabindex="2" placeholder="Password " ng-model="signup.password" ng-pattern="/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/" ng-required="true" />
        <span ng-show="SignupForm.password.$error.minlength" style="color:red; display:block; text-align:center;"><small>* Minimum eight characters</small></span>
        <span ng-show="SignupForm.password.$error.pattern" style="color:red; display:block; text-align:center;"><small>* At least one digit</small></span>
        <span style="color:red; display:block; text-align:center;" ng-show="passwordrequire && !SignupForm.password.$dirty">* Password required</span>

        <input type="password" name="confirm" id="confirm-password" ng-minlength="8" tabindex="2" placeholder="Confirm Password" ng-model="signup.confirm" ng-pattern="signup.password" ng-required="true" />
        <span ng-show="SignupForm.confirm.$error.pattern" style="color:red; display:block; text-align:center;"><small>* Password didn't match</small></span>
        <span style="color:red; display:block; text-align:center;" ng-show="confirmrequire && !SignupForm.confirm.$dirty">* Re enter Password</span>

        <input type="radio" name='Gender' ng-model="signup.gender" value="male" ng-required="true"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Male</span>
        <input type="radio" name='Gender' ng-model="signup.gender" value="female" ng-required="true"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Female</span>
        <span style="color:red; display:block; text-align:center;" ng-show="rollrequire && !SignupForm.rollno.$dirty">*Roll No required</span>
        <input type="submit" value="SIGN UP" />
    </form>
</body>

</html>

Angular validation error

2 Answers2