CODEWITHSUNDEEP
validationangularjs
Abhishek Subradeep
Abhishek Subradeep

Reputation: 296

angular.js validation of the javascript

At the moment this is my code:

<!doctype html>
<html ng-app="validation-example">
<head>
    <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
    <link href="http://docs.angularjs.org/css/bootstrap.min.css" rel="stylesheet" />
    <link href="http://docs.angularjs.org/css/font-awesome.css" rel="stylesheet" />
    <link href="http://docs.angularjs.org/css/docs.css" rel="stylesheet" />
    <link href="StyleSheet.css" rel="stylesheet" />

    <script src="script.js"></script>
</head>
<body style="background-color: teal">
    <link href="StyleSheet.css" rel="stylesheet" />

    <div ng-controller="Controller">
        <form name="form" class="css-form" novalidate>
            Float:        
          <input type="text" ng-model="length" name="length" smart-float />
            {{length}}<br />
            <span ng-show="form.length.$error.float">This is not a valid float number!</span>
            <br />
            <button ng-click="submit()"
                ng-disabled="form.$invalid">
                Submit</button>
        </form>
    </div>
</body>
</html>

And js

var app = angular.module('validation-example', []);

function Controller($scope) {
    $scope.master = {};

    $scope.reset = function () {
        $scope.user = angular.copy($scope.master);
    };   

    $scope.reset();

    $scope.submit = function () {
        debugger;
        if (form.$invalid)
        {
            alert("sss");
        }
    };
}

var FLOAT_REGEXP = /^\d+((\.|\,)\d+)?$/;
app.directive('smartFloat', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {
                if (FLOAT_REGEXP.test(viewValue)) {
                    ctrl.$setValidity('float', true);
                    return parseFloat(viewValue.replace(',', '.'));
                } else {
                    ctrl.$setValidity('float', false);
                    return undefined;
                }
            });
        }
    };
});

And i have the button disabled when the float is invalid. However i want to always enable the submit button and on the server in the function to check if the form is invalid and to pop an alert to the user that the submit is interrupted because we have invalid data. When applying class binding i can "form.$invalid", but if i remove it in order to allow invalid submit then in the function if (form.$invalid) is undefined. How to check in the controller if i have invalid inputs in the form? I can loop through the elements and check for ng-invalid css class but this is the most dumiest think so please suggest a smart solution.

Upvotes: 2

Views: 2834

Answers (1)

S. Ravi Kiran
S. Ravi Kiran

Reputation: 4303

All errors of your form are set to the $scope.formName.$error object. I just inspected the properties set to this object using Chrome's developer tools and found that this object holds all the validation errors in different arrays based on error types. The screenshot below will give you a better idea:

$error object properties

The sample code using which I inspected this is available on jsfiddle

You need to loop through these properties and build the error message you wish to show on the pop-up.

Upvotes: 2

Related Questions