我有一个带有输入字段集的html表单,我给每个输入字段required="true"
进行验证。但是当我在输入必填字段后点击提交时会出现错误:
名称为''的无效表单控件不可专注
我知道如果我们使用novalidate
形式我不会得到错误,但我的验证不起作用。如何在没有错误的情况下进行验证?
<form name="customerForm" class="form-horizontal" id="custForm">
<fieldset>
<div class="form-group">
<label for="customerName" class="col-lg-4 col-lg-offset-1 control-label">Name</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.customerName" placeholder="Enter customer name" type="text" required="true" value = "{{customerName}}">
</div>
</div>
<div class="form-group">
<label for="postCode" class="col-lg-4 col-lg-offset-1 control-label">Post code</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.address.postcode" placeholder="Enter post code" type="text" value = "{{postCode}}">
</div>
<div class="col-lg-2">
<button type="next" class="btn btn-primary" ng-click="$ctrl.findAddress()">Find address</button>
</div>
</div>
<div class="form-group">
<label for="selectAddress" class="col-lg-4 col-lg-offset-1 control-label">Select address</label>
<div class="col-lg-4">
<select class="form-control" id="selectAddress" ng-model="$ctrl.quote.newClient.customerAddress" ng-change="$ctrl.populateAddressFields()">
<option ng-repeat="address in addresses"
value="{{address}}" >{{address}}</option>
</select>
</div>
</div>
<div class="form-group ng-hide">
<label for="textArea" class="col-lg-4 col-lg-offset-1 control-label">Address</label>
<div class="col-lg-4">
<textarea ng-model="$ctrl.quote.newClient.customerAddress" class="form-control" rows="3" required="true"></textarea>
</div>
</div>
<div class="form-group">
<label for="address1" class="col-lg-4 col-lg-offset-1 control-label">Address 1</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.address.addressLine1" placeholder="Enter Address 1" type="text" required="true" value = "{{addressLine1}}">
</div>
</div>
<div class="form-group">
<label for="address2" class="col-lg-4 col-lg-offset-1 control-label">Address 2</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.address.addressLine2" placeholder="Enter Address 2" type="text" required="true" value = "{{addressLine2}}">
</div>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-4 col-lg-offset-1 control-label">Email address</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.eMail" placeholder="Enter customer email" type="email" required="true" value = "{{emailId}}">
</div>
</div>
<div class="form-group">
<label for="customerMobile" class="col-lg-4 col-lg-offset-1 control-label">Mobile number</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.customerMobile" placeholder="Enter customer mobile number" type="text" required="true">
</div>
</div>
<div class="form-group" ng-show="$root.customerDetails.tradeType.description == 'Limited Company'">
<label for="inputCompanyRegistrationNumber" class="col-lg-4 col-lg-offset-1 control-label">Company registration number</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.companyRegNo" placeholder="Enter company registration number" type="text" required="true">
</div>
</div>
</fieldset>
</form>
我使用$valid
来验证表单
<div class="col-lg-1">
<button form="custForm" type="submit" class="btn btn-primary right-button" ng-click="customerForm.$valid && $ctrl.proceedToPaymentDetails()">Next</button>
</div>