使用angular.js

时间:2015-10-31 09:55:34

标签: javascript angularjs forms validation

我需要一个帮助。我需要在警告提示中显示所有验证消息,而不是使用Angular.js使用ng-message。首先让我解释一下我的表单代码。

<form name="billdata" id="billdata"  enctype="multipart/form-data" novalidate>
<div id="SHOWDATA">
<div id="transactionsPortlet" class="panel-collapse collapse in">
<div class="portlet-body">
<div class="totalaligndiv">
<div class="col-md-6">

<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">College Title :</span>
<input type="text" name="colgmname" id="procolgtitle" class="form-control" placeholder="Add College Title" ng-model="colgname" >
</div> 

<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">College subtitle :</span>
<input type="text" name="shortname" id="procolgsubtitle" class="form-control" placeholder="Add College subtitle" ng-model="shortname" >
</div> 
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Contact No :</span>
<div ng-class="{ 'has-error': billdata.mobno.$touched && billdata.mobno.$invalid }">
<input type="text" name="mobno" id="procolgcontactno" class="form-control" placeholder="Add contact no" ng-model="contno"  ng-pattern="/^[0-9]{10,10}$/" >
</div>
</div>
<div class="help-block" ng-messages="billdata.mobno.$error" ng-if="billdata.mobno.$touched">
<p ng-message="pattern" style="color:#F00;">This field needs only number(e.g-0,1..9) and also no decimal values are allowed.</p>
</div>
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Email Address :</span>
<div ng-class="{ 'has-error': billdata.email.$touched && billdata.email.$invalid }">
<input type="email" name="email" id="procolgmail" class="form-control" placeholder="Add email id" ng-model="colgemail" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" >
</div>
</div>

<div class="help-block" ng-messages="billdata.email.$error" ng-if="billdata.email.$touched">
<p ng-message="email" style="color:#F00;">This needs to be a valid email</p>
<p ng-message="pattern" style="color:#F00;">This field needs valid email format(e.g-abc@gmail.com).</p>
</div>
</div>
<div class="col-md-6">
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">College Code :</span>
<input type="text" name="colgcode" id="procolgcode" class="form-control" placeholder="Add college code" ng-model="colgcode" >
</div>
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">College Address :</span>
<textarea id="procolgaddress" name="address" class="form-control" placeholder="Add College Address" rows="5" ng-model="address" style="height:122px"></textarea>
</div>
</div>
<div class="clearfix"></div>    
<div style="text-align:center; padding-top:10px;">
<input type="button" class="btn btn-success" ng-click="addProfileData(billdata);"  id="addProfileData" ng-value="Add"/>
</div>
<div class="clearfix"></div>    

</div>
</div>
</div>
</div>  
</form>

此处我的要求是,如果用户点击ADD按钮而不填写表单,则字段必需消息将出现在警报提示中,而不是使用ng-message。类似于其他验证,如{{1}单击按钮时应该出现警告提示。如果发生任何错误,红色边框线将显示在必填字段,但单击按钮后将显示该消息。请帮助我。

0 个答案:

没有答案