add class when input is valid in angularjs

Question

I have a bug in my angularjs form. I want to change the class of an element when the input from the angularjs form is valid and change it back if its invalid.

I got this code:

<li data-ng-class="{ success: userFormRegistration.email.$valid, danger: userFormRegistration.email.$invalid }" class="danger">valid email</li>

Now this is the input of the email:

<input type="email" name="email" data-ng-model="userFormRegistration.email" class="form-control ng-pristine ng-invalid ng-invalid-required ng-invalid-email" placeholder="Email" required="">

In the beginning the class added is danger but when i enter a valid email it is deleting the class but not adding the success class..

Here is the angularjs code:

// app.js
            // create angular app
            var FormApp = angular.module('FormApp', []); ;


            // create angular controller
            /*FormApp.controller('registrationFormController', function ($scope, $http) {*/
            function registrationFormController($scope, $http) {
                // create a blank object to hold our form information
                // $scope will allow this to pass between controller and view
                $scope.userFormRegistration = {};

                // function to submit the form after all validation has occurred            
                $scope.submitForm = function (form) {
                    // check to make sure the form is completely valid
                    if (form.$valid) {
                        $scope.userFormRegistration = { actionname: "registration", email: $scope.userFormRegistration.email, password: $scope.userFormRegistration.password }
                        // start ajax call
                        $http({
                            method: 'POST',
                            url: 'Registration.php',
                            data: $.param($scope.userFormRegistration),  // pass in data as strings
                            headers: { 'Content-Type': 'application/x-www-form-urlencoded'}  // set the headers so angular passing info as form data (not request payload)
                        })
                            .success(function (data) {
                                console.log(data);
                                if (!data.success) {
                                    // if not successful, bind errors to error variables
                                    $scope.errorRegistrationEmail = data.errors.email2;
                                    $scope.errorRegistrationPassword = data.errors.password;
                                    $scope.errorRegistrationActionname = data.errors.actionname;
                                    $scope.registrationMessage = data.message;
                                }
                                else {
                                    // if successful, bind success message to message
                                    $scope.message = data.message;
                                }
                            });
                        //end ajax call
                    }
                    else {
                        if (!$scope.userFormRegistration.email.$valid) {
                            var error = { message: "please enter valid email" };
                            $scope.errorRegistrationMessage = error.message;
                        }
                        else if (!$scope.userFormRegistration.password.$valid) {
                            var error = { message: "please enter valid password " };
                            $scope.errorRegistrationMessage = error.message;
                        }
                    }
                };
            };

Your advice please.

you need to specify condition when and what you want to show in class when input is success or danger — Hardik Gondalia
– Hardik Gondalia, Commented Nov 24, 2015 at 5:13
Are you certain the email address you are filling in is valid? Are you reusing the name somewhere else in the form? — Carlos G.
– Carlos G., Commented Nov 24, 2015 at 5:36

Leandro Zubrezki · Accepted Answer · 2015-11-24 06:08:48Z

1

The $valid and $invalid properties come from the form and not from the value of the input. You need a form element with a name, then also a name into the input, and then use formName.inputName.$valid or $invalid.

answered Nov 24, 2015 at 6:08

Leandro Zubrezki

1,1609 silver badges13 bronze badges

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

1 Comment

Rafael Over a year ago

Thank you alot! the problem was that the form not was an object...=]

Collectives™ on Stack Overflow

add class when input is valid in angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related