验证错误名称为''的无效表单控件不可专注

时间:2016-10-17 08:31:11

标签: javascript html twitter-bootstrap meteor

我有一个带有输入字段集的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>

0 个答案:

没有答案