Javascript 使用带角度和引导的ng模式3
我是网络开发新手。现在我的代码如下->Javascript 使用带角度和引导的ng模式3,javascript,jquery,angularjs,html,twitter-bootstrap,Javascript,Jquery,Angularjs,Html,Twitter Bootstrap,我是网络开发新手。现在我的代码如下-> <form name="loginForm" id="loginform" class="form-horizontal" role="form" novalidate> <div ng-show="errorMessage" class="compact-container alert text-center alert-danger col-xs-12"> {{errorMessage}}
<form name="loginForm" id="loginform" class="form-horizontal" role="form" novalidate>
<div ng-show="errorMessage" class="compact-container alert text-center alert-danger col-xs-12"> {{errorMessage}}</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" ng-pattern="/^[a-z0-9]*$/" data-ng-model="formInfo.username"
value="" placeholder="username or email" required>
</div>
<div ng-show="loginForm.username.$error.pattern">
<span class="jdIdError-Color">Please use Lower case charchters</span>
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" data-ng-model="formInfo.password" name="password" required
placeholder="password">
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<button type="submit" class="btn btn-info login-button-position" id="loginBtn" name="loginBtn" ng-disabled="!loginForm.$valid"
data-ng-click="isLoading=true;submit(loginForm)">
<span ng-hide="hideSpinner"
class="loginContainer-spinner">
<i class="fa fa-spin fa-refresh"></i>
</span>
<span class="text-white"><strong>Login</strong></span>
</button>
<!--<a id="btn-login" href="#" class="btn btn-success" data-ng-click="isLoading=true;submit(loginForm)">Login </a>-->
</div>
</div>
</form>
{{errorMessage}}
请使用小写字符
登录
所以,当我给出错误消息时,它是这样给出的
在这里,我删除了div,现在,当我尝试使用margin将该消息提高一点时,它就没有发生。所以
将错误div移出输入组div:
<form name="loginForm" id="loginform" class="form-horizontal" role="form" novalidate>
<div ng-show="errorMessage" class="compact-container alert text-center alert-danger col-xs-12"> {{errorMessage}}</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" ng-pattern="/^[a-z0-9]*$/" data-ng-model="formInfo.username" value="" placeholder="username or email" required>
</div>
<div ng-show="loginForm.username.$error.pattern">
<span class="jdIdError-Color">Please use Lower case charchters</span>
</div>
</form>
{{errorMessage}}
请使用小写字符
从输入组类中删除错误div
{{errorMessage}}
请使用小写字符
引导程序为验证错误提供“帮助阻止”类。
所以您需要将“输入组”包装到表单组中,并将类“帮助块”添加到您的范围中
请参见下面的示例
请使用小写字符
登录
remove error div from form group classHey,谢谢我这么做了,请检查我的更新问题我想在该div中包含该消息,因为用户会很容易知道。删除底部边距