Javascript 使用链接和angular.js进行HTML5验证

我有一个简单的表格，分为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验证在按钮单击上工作，以及如何在字段正确填充之前禁用按钮？

如果要在所有字段未插入有效数据之前禁用按钮，请尝试此选项

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

下一节

您可以将下一节链接更改为

并使用

ng disabled

<代码>禁用ng不适用于

元素。 只需将所有条件写入

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>

下一节
下一节

如果必须使用

，则必须自己禁用链接。例如：

.disabled {
  cursor: not-allowed;
}

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

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

。已禁用{
光标：不允许；
}
添加
$scope.disabled=函数（）{
如果（$scope.addInvitesDisabled）{return false；}
}    

您可以将其用作参考：

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

名字：
姓氏：
电邮：
*无效
给我登记

我担心这不起作用，即使字段被填充，它仍然不可用，而不是使用“锚（”）标记使用按钮，因为在按钮上，上面的代码工作得很好。下一节我可以使用按钮，这不是问题，我将研究ng disabled=“myform.first_name.$invalid | |..”因为我认为这是最好的解决方案，它不会在触发提交而不是下一节时起作用，但是如果它被禁用，它将如何触发提交？