Question

我想要验证没有提交按钮的表单。

    <div ng-controller="UserCreationCtrl">
        <form novalidate="novalidate" class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="inputUserLogin">User Login:</label>

                <div class="controls">
                    <input type="email" id="inputUserLogin" ng-model="user.userLogin" placeholder="User Login" required />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputFirstName">First name:</label>

                <div class="controls">
                    <input type="text" id="inputFirstName" ng-model="user.firstName" placeholder="First name"/>
                </div>
            </div>

            <div>
                <span  class="nullable">
                    <select ng-model="user.lookupId" ng-options="select as speciality.lookupName for speciality in specialityList" ng-change="selectedSpecilaty()">
                        <option value="">-- choose speciality --</option>
                    </select>
                </span>
            </div>
            <div> some extra other fields goes here</div>
            <div class="control-group">
                <div class="controls">
                    <a ng-click="cancel()" class="btn btn-info btn-xs">cancel</a>
                    <a ng-click="createNewUser()" class="btn btn-small btn-primary">create new user</a>
                </div>
            </div>

        </form>
    </div>

如何将userlogin(email)，firstname和speciality字段设为强制性，email字段必须验证为电子邮件。通常我们如何验证没有提交按钮的表单。即当我点击“创建新用户”链接时，应验证表单。

单击链接后出现错误时，表单应具有正确的字段数据，并且应仅显示错误字段旁边的错误消息或显示红色字段。

我们可以在没有控制器的情况下在html本身中对表单进行客户端验证吗？

由于

Answer 1

在$ formName中使用。$ valid 所有必要的输入字段都需要必需的属性。

<form novalidate="novalidate" class="form-horizontal" name='myForm'>
 <a ng-click="createNewUser()" class="btn btn-small btn-primary" ng-disabled="!myForm.$valid">create new user</a>
</form>

http://plnkr.co/edit/6zVqTeW1WARIUcbS7dC9?p=preview

Answer 2

回答你的问题：

必填字段使用＆＃34; required＆＃34;进行评估。属性（HTML5）。
电子邮件字段使用类型＆＃34;电子邮件＆＃34;进行评估。（HTML5）。
您可以提交＆＃34;提交＆＃34;键入按钮或使用＆＃34; ng-click＆＃34;指令，或者。
应该使用指令进行自定义验证（参见docs）。
这里有一个自定义验证的例子：

<form name="form" class="css-form" novalidate>
  <div>
    Size (integer 0 - 10):
    <input type="number" ng-model="size" name="size"
           min="0" max="10" integer />{{size}}<br />
    <span ng-show="form.size.$error.integer">This is not valid integer!</span>
    <span ng-show="form.size.$error.min || form.size.$error.max">
      The value must be in range 0 to 10!</span>
  </div>

  <div>
    Length (float):
    <input type="text" ng-model="length" name="length" smart-float />
    {{length}}<br />
    <span ng-show="form.length.$error.float">
      This is not a valid float number!</span>
  </div>
</form>

Answer 3

<form name="form_validation" ng-submit="form_validation.$valid && submit()" novalidate> <div ng-show="form_validation.$submitted || form_validation.to_address.$touched">
   <div class="alert alert-warning" ng-show="form_validation.to_address.$error.required || form_validation.to_address.$error.email"><a href="#" class="close" data-dismiss="alert">&times;</a>Enter valid Email Addresses.</div>
 </div>
 <div class="form-group">
    <label for="ToAddress"> To Address: </label>
    <input type="email" name="to_address" id="to_address" class="form-control" ng-model="user.to_address" ng-required="true"/>
</div>

试试这个， http://www.drtuts.com/handle-form-using-angularjs/

表单验证angularjs没有提交按钮

3 个答案: