Question

您好我正在尝试在表单提交上显示我的验证，但验证不起作用，表单仍会被发送。这是我的表格：

<form class="form-horizontal col-md-10" role="form" name="authenticationForm" ng-controller="AuthenticationController as authentication" ng-submit="authenticate(authenticationForm.$valid)" novalidate>
        <hr>
        <br>
        <div class="form-group" ng-class="{ 'has-error' : authenticationForm.email.$invalid && !authenticationForm.email.$pristine && submitted }">
            <div class="col-md-4">
                <label for="email">Email: </label>
            </div>

            <div class="col-md-6">
                <input type="email" id="email" name="email" ng-model="email" class="form-control" ng-required/>
                <p ng-show="authenticationForm.email.$invalid && !authenticationForm.email.$pristine && submitted" class="help-block">
                    Your email address is required.
                </p>
            </div>
        </div>

        <div class="form-group" ng-class="{ 'has-error' : authenticationForm.password.$invalid && !authenticationForm.password.$pristine && submitted }">
            <div class="col-md-4">
                <label for="password">Password</label>
            </div>

            <div class="col-md-6">
                <input type="password" id="password" name="password" ng-model="password" class="form-control" ng-required/>
                <p ng-show="authenticationForm.password.$invalid && !authenticationForm.password.$pristine && submitted" class="help-block">
                    Password is required.
                </p>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-6 col-md-offset-4">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="remember"> Remember Me
                    </label>
                </div>
            </div>
        </div>

        <span class="help-block errorMessages" ng-show="user.input.errors !== undefined">
            <div class="alert alert-danger">
                <ul class="list">
                    <li ng-repeat="error in user.input.errors">

                        <i class="fa fa-times"></i>&nbsp;<% error %>

                    </li>
                </ul>
            </div>
        </span>

        <div class="form-group">
            <div class="col-md-12">
                <br/>
                <hr>
                <button class="big-red-button" type="submit">Login <i class="glyphicon glyphicon-chevron-right"></i></button>

                <a class="btn btn-link" href="{{ url('/password/email') }}">Forgot Your Password?</a>
            </div>
        </div>

    </form>

这是我的控制器功能：

$scope.authenticate = function(isValid) {
            // settting submitted to true
            $scope.submitted = true;

            // check to make sure the form is completely valid
            if (isValid) {

                var req = {
                    method: 'POST',
                    url: '/auth/login',
                    headers: {
                        'X-XSRF-Token': $("meta[name='csrf_token']").attr("content")
                    },
                    data: {
                        email: $scope.email,
                        password: $scope.password
                    }
                }

                $http(req)
                    .success(function (data, status, headers, config) {
                        if (data.url !== undefined)
                        {
                            window.location.href = data.url;
                        }
                    })
                    .error(function (data, status, headers, config) {
                        // called asynchronously if an error occurs
                        // or server returns response with an error status.
                        //alert(data);
                    });

            }

        };

有人可以指出我在这里做错了吗？谢谢。：）

Answer 1

您应该能够检查$scope.authenticationForm.$valid并阻止xhr，您还可以直观地将提交按钮设置为ng-disabled="authenticationForm.$invalid"，这样他们就无法点击按钮直到它有效。该禁用设置不会阻止以其他方式提交表单（输入密钥等）。

你检查过布尔值吗？应该是false是否存在验证错误。

Answer 2

当您使用controllerAs语法时，您应该将每个ng-model用作

authentication.email＆amp; authentication.password

电子邮件字段

<input type="email" id="email" name="email" ng-model="authentication.email" 
class="form-control" ng-required/>

密码字段

<input type="password" id="password" name="password" ng-model="authentication.password" 
class="form-control" ng-required/>

然后在控制器内你可以通过this.email＆amp;获得此值。 this.password

Answer 3

这也发生在我身上。将ng-required更改为required，如果isValid布尔值不是有效形式并取出表单元素中的novalidate，请确保它实际上为false。

有时角度$ valid并不总是准确的。此外，如果您使用ng-required，我认为您应该将ng-required =“true”或某些函数返回true。

查看此文章：http://arnaldocapo.com/blog/post/detect-if-html-5-validation-ui-is-present/53

Answer 4

只需将每个ng-required替换为required，例如：

<input type="text" required/>

并设置ng-controller="AuthenticationController "而不是

ng-controller="AuthenticationController as authentication"

在角度提交时验证表单

4 个答案: