带有链接和 angular.js 的 HTML5 验证

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

如果你想禁用按钮，直到所有字段都没有插入有效数据，试试这个

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