HTML5驗證與鏈接和angular.js

Question

我有一個簡單的表格分爲3個部分。在第一部分我收集名字，姓氏和電子郵件。

我試圖使用type="email"和required提供驗證反饋，但是我不使用input submit直到表單的最後一部分。一旦用戶點擊

<a ui-sref="form.select" class="btn btn-block btn-info" > 
      Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span> 
     </a> 

我想這個點擊觸發驗證的方式通常會提交

形式分爲三個部分中的每個部分僅出現。

即使禁用此按鈕，直到用戶填寫字段。

以下是完整的表單代碼

<div class="form-group"> 
    <label for="first-name">First Name*</label> 
    <input type="text" class="form-control" name="Fname" placeholder="Enter first name" ng-model="formData.Fname" required> 
</div> 

<div class="form-group"> 
    <label for="last-name">Last Name*</label> 
    <input type="text" class="form-control" name="Lname" placeholder="Enter last name" ng-model="formData.Lname" required> 
</div> 

<div class="form-group"> 
    <label for="email">Email*</label> 
    <input type="email" class="form-control" name="email" placeholder="Enter a valid email address" ng-model="formData.email" required> 
</div> 

<div class="form-group row"> 
    <div class="col-xs-6 col-xs-offset-3"> 
     <a ui-sref="form.select" class="btn btn-block btn-info" > 
      Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span> 
     </a> 
    </div> 
</div> 

問題

所以我的問題，如何讓HTML 5的驗證點擊按鈕的工作，以及如何禁用按鈕，直到場正確填充？

Answer 1

你可以在下一節鏈接更改爲<button>和使用ng-disabled。 ng-disabled不適用於<a>元素。 要麼寫ng-disabled中的所有條件，要麼寫得太長/複雜，寫一個控制器函數來檢查。

<button ui-sref="form.select" ng-disabled="myform.first_name.$invalid || ...."> 
    Next Section 
</button> 

<button ui-sref="form.select" ng-disabled="isButtonDisabled()"> 
    Next Section 
</button> 

如果您必須使用<a>，則必須自行禁用鏈接。例如：

.disabled { 
    cursor: not-allowed; 
} 

<a ng-click="disabled()" ng-class="{disabled: addInviteesDisabled()}">Add</a> 

$scope.disabled = function() { 
    if($scope.addInviteesDisabled) { return false;} 
}  

Answer 2

如果你想，直到所有領域都沒有有效的數據插入到禁用按鈕試試這個

<a ui-sref="form.select" class="btn btn-block btn-info" ng- 
disabled="formData.$invalid" >Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span> 
</a> 

Answer 3

您可以使用此作爲參考：

<form name="upSign"> 

     First Name: 
      <input type="text" name="firstName" placeholder="Enter your first name" ng-model="user.first_name" required> 


     Last Name: 
      <input type="text" name="lastName" placeholder="Enter your last name" ng-model="user.last_name" required> 


     Email: 
      <input type="email" name="mailId" ng-model="user.email_id" placeholder="Enter your Email" required> 

    </form> 

    <p ng-show="upSign.firstName.$invalid || upSign.mailId.$invalid || upSign.lastName.$invalid" style="color: red">* Invalid</p> 


    <button class="button button-full button-positive" ng-disabled="upSign.firstName.$invalid || upSign.mailId.$invalid || upSign.lastName.$invalid || upSign.firstName.$untouched || upSign.mailId.$untouched || upSign.lastName.$untouched" ng-click="register()">Register Me</button>