简体   繁体   中英

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

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM