2

您好，我正在尝试在表单提交时显示我的验证，但验证不起作用，无论如何都会发送表单。这是我的表格：

<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);
                    });

            }

        };

有人可以指出我在这里做错了什么吗？谢谢。:)

4

4 回答 4

0

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

有时角度 $valid 并不总是准确的。另外，如果您使用的是 ng-required，我认为您应该放置 ng-required="true" 或一些返回 true 的函数。

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

于 2015-04-24T20:09:52.147 回答
0

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

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

于 2015-04-24T19:56:43.540 回答
0

只需替换所有ng-required喜欢的地方required：

<input type="text" required/>

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

ng-controller="AuthenticationController as authentication"
于 2015-04-24T20:19:50.473 回答
0

当您使用 controllerAs 语法时，您应该使用每个ng-modelas

authentication.email&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&this.password

于 2015-04-24T19:58:11.397 回答