CODEWITHSUNDEEP
javascripthtmlangularjs
J.Pip
J.Pip

Reputation: 4613

AngularJS form validation not showing error message

I'm trying to do form validation with AngularJS but somehow the page won't show my required message.

Can anyone point me in the right direction what I'm missing at this time? I've just picked up AngularJS and I'm trying to write a proof of concept, so we can use this in production.

HTML

<form id="signup" class="form-horizontal" name="signup" novalidate>
        <legend>Register</legend>
        <div class="control-group">
            <div class="control-group">
                <label class="control-label">Username</label>

                <div class="controls">
                    <div class="input-prepend">
                        <span class="add-on"><i class="icon-user"></i> </span>
                        <input type="text" class="input-xlarge" id="uname" ng-model="register.uname" name="uname" placeholder="Username" required>
                        <span ng-show="signup.uname.$error.required" class="help-inline">Required</span>
                    </div>
                </div>
            </div>

JavaScript

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

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

Upvotes: 4

Views: 8614

Answers (1)

ndequeker
ndequeker

Reputation: 7990

As J.Pip stated, the message wasn't shown due to mis formatted HTML code. It should be solved with the code below.

HTML code

<form id="signup" class="form-horizontal" name="signup" novalidate>
    <legend>Register</legend>
    <div class="control-group">
        <label class="control-label">Username</label>
        <div class="controls">
            <div class="input-prepend">
                <span class="add-on"><i class="icon-user"></i> </span>
                <input type="text" class="input-xlarge" id="uname" ng-model="register.uname" name="uname" placeholder="Username" required />
                <span ng-show="signup.uname.$error.required" class="help-inline">Required</span>
            </div>
        </div>
    </div>
</form>

Upvotes: 1

Related Questions