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();
}

};
});

Sravan · Accepted Answer · 2017-08-24 05:53:28Z

2

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

answered Aug 24, 2017 at 5:53

Sravan

18.7k3 gold badges34 silver badges54 bronze badges

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

Comments

score 1 · Accepted Answer · 2017-08-24 05:44:54Z

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>

Collectives™ on Stack Overflow

Angular validation error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related