CSS effect on input turns red, while username/password is correct.

Issue

I'm currently making a app, with a loginpanel. But somehow I'm having trouble with a bug. In my loginController I made a scope for logging in. Further I made checks for empty fields, or wrong username/password. All with CSS border effects like green for correct and red for wrong.

But when I login, both input fields turn red while the data is correct. Am I missing something here? Hereby my loginController made in AngularJS/Javascript :

$scope.login = function () {
            $scope.errorMessg = "";

            if ($scope.userinfo.username.length > 0 &&
                $scope.userinfo.password.length > 0) {

                API.all("user/login").post({
                    username: $scope.userinfo.username,
                    password: $scope.userinfo.password

                }).then(function() {
                    if ($scope.userinfo.rememberMe) {      //Save in cookie
                        $cookies.put("cmUsername", $scope.userinfo.username);
                        $cookies.put("cmPassword", $scope.userinfo.password);
                    }
                    $state.go('home.dashboard', {userid: $scope.userinfo.username});

                }, function(error) {
                    switch (error.data.applicationCode) {
                        case 'U0002':
                            $scope.errorMessg = gettextCatalog.getString("We don't recognize this accountdata");
                            break;

                        default:
                            $scope.errorMessg = gettextCatalog.getString("Whoops, something went wrong!");
                            $scope.err = true;
                    }

                    if ($cookies.get("cmUsername") && $cookies.get("cmPassword")) {
                        $cookies.remove("cmUsername");
                        $cookies.remove("cmPassword");
                    }
                });

            } else
                $scope.errorMessg = gettextCatalog.getString("Fields can't be empty!");
                $scope.err = true;
        }

Thanks in advance for any tips or advice.

Solution

Try wrapping the final else

else {
    $scope.errorMessg = gettextCatalog.getString("Fields can't be empty!");
    $scope.err = true;
}

the $scope.err = true; is always executed at the end of that code, so maybe that's why your input fields turn red.

Answered By - Sabaz