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です：

<input type="text" required/>

ng-controller="AuthenticationController "また、代わりに設定します

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

controllerAs 構文を使用しているため、それぞれng-modelを次のように使用する必要があります

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 に答える
0

xhrをチェック$scope.authenticationForm.$validして防止できるはずです。また、送信ボタンを視覚的に設定して、ng-disabled="authenticationForm.$invalid"有効になるまでボタンをクリックできないようにすることもできます。その無効な設定は、フォームの他の方法 (キーを入力するなど) の送信を妨げるものではありません。

あなたに来るブール値をチェックしましたか？false検証エラーがあるはずです。

于 2015-04-24T19:56:43.540 に答える
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 に答える