Блог

У меня была 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 amp;amp; $ctrl.proceedToPaymentDetails()">Next</button>
 </div>