CODEWITHSUNDEEP
angularjsvalidationng-submit
Anis
Anis

Reputation: 1220

Angular validation error

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

};
});

Upvotes: 1

Views: 262

Answers (2)

Sravan
Sravan

Reputation: 18647

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

Upvotes: 2

user7110739
user7110739

Reputation:

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>

Upvotes: 1

Related Questions