帶有鏈接和angular.js的HTML5驗證

Question

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

我正在嘗試使用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

如果要禁用按鈕，直到所有字段都未插入有效數據，請嘗試此操作

<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 2

您可以將下一部分鏈接更改為<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 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>