Error message not displayed on form submit when pristine

Question

I have following code for form validation. It shows error messages when I enter some value in textbox (dirty) and the value is invalid. But when I do not make any change (pristine) and click submit, the error messages are not shown. How to fire error messages in this scenario?

Note: When I removed pristine check, the error message is displayed even before submitting.

<!DOCTYPE html>
<html>
<head>
    <!-- bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <style>
        body{padding-top: 30px;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-resource.js"></script>
    
    <script type="text/JavaScript">

        var myApp = angular.module('myApp', []);
        
        myApp.controller('myController', function ($scope) {

            //Call function on form submit
            $scope.submitForm = function (isValid) {

                if (isValid) {
                    alert('Valid');
                }
                else {
                    alert('Invalid');
                }

            };

        });

    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
    <div class="myDiv">
        <div class="col-sm-8 col-sm-offset-2">
            <div class="page-header">
                <h1>Validation</h1>
            </div>
            <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
            <!-- Prevents HTML5 validation using novalidate-->
            
            
            <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
                <label>Name</label>
                <input type="text" name="name" class="form-control" ng-model="user.name" required>
                <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">
                    Name required.</p>
            </div>

            
            <div class="form-group" ng-class="{ 'has-error' : userForm.location.$invalid && !userForm.location.$pristine }">
                <label>Location</label>
                <input type="text" name="location" class="form-control" ng-model="user.location"
                    ng-minlength="3" ng-maxlength="8">
                <p ng-show="userForm.location.$error.minlength" class="help-block">
                    Location is less than min length.</p>
                <p ng-show="userForm.location.$error.maxlength" class="help-block">
                    Location more than max length.</p>
            </div>

            <button type="submit" class="btn btn-primary">Submit</button>
            </form>
        </div>
        
    </div>
</body>
</html>

charlietfl · Accepted Answer · 2016-06-26 01:11:45Z

2

Try using userForm.$submitted instead of $pristine

For a good learning exercise and debugging try the following in view

<pre>{{userForm|json}}</pre>

edited Jun 26, 2016 at 1:11

answered Jun 26, 2016 at 1:06

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Collectives™ on Stack Overflow

Error message not displayed on form submit when pristine

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related