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

您可以将下一部分链接更改为<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="type_unknown depth_2"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1123">  Daoust University Refreshs </a> <ul id="yui_3_15_0_4_1495615549528_188"> <li class="type_unknown depth_3"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1257">  REFRESH DIVERSITEIT</a> </li> <li class="type_unknown depth_3"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1230">  REFRESH DOELGROEPENVERMINDERINGEN</a> </li> <li class="type_unknown depth_3" id="yui_3_15_0_4_1495615549528_187"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1167">  REFRESH FEESTDAGEN</a> </li> <li class="type_unknown depth_3"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1270">  REFRESH VREEMDELINGEN</a> </li> </ul> </li> <li class="type_unknown depth_2"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1123">  Daoust </a> <ul id="yui_3_15_0_4_1495615549528_188"> <li class="type_unknown depth_3"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1257">  REFRESH</a> </li> <li class="type_unknown depth_3"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1230">  REFRESH</a> </li> <li class="type_unknown depth_3" id="yui_3_15_0_4_1495615549528_187"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1167">  REFRESH</a> </li> <li class="type_unknown depth_3"> <a href="http://moodlelive.dev/mod/wiki/view.php?pageid=1270">  REFRESH</a> </li> </ul> </li>并使用<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>

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>

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

3 个答案: