AngularJS form validation not showing error message

Question

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);
    }
};

What is inside your scope? Please provide a snippet of your controller / directives. — ndequeker
– ndequeker, Commented Jul 2, 2013 at 12:15
at this time the controller is still pretty empty just a reset function that clears the model — J.Pip
– J.Pip, Commented Jul 2, 2013 at 12:16
If I re-create the page in jsFiddle, I do see the 'required' message. Please make sure your HTML-tags are closed correctly. — ndequeker
– ndequeker, Commented Jul 2, 2013 at 12:41
the fix was to getting the span out of the input-prepend div, after that it displayed the message correctly — J.Pip
– J.Pip, Commented Jul 2, 2013 at 13:04

Community · Accepted Answer · 2020-06-20 09:12:55Z

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>

Collectives™ on Stack Overflow

AngularJS form validation not showing error message

HTML

JavaScript

1 Answer 1

HTML code

Comments

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JavaScript

1 Answer 1

HTML code

Comments

Related