1. ホーム
  2. angularjs

[解決済み] Angularjsで入力検証失敗時にフォームを送信しないようにする

2022-04-26 18:58:45

質問

angularjsを使って簡単なログインフォームを書いているのですが、ユーザー名とパスワードが空でなく、3文字以上であることをチェックするためのクライアントサイドの入力検証をいくつか行っています。以下のコードをご覧ください。

<form name="loginform" novalidate ng-submit="login.submit()" class="css-form">
    <fieldset>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-user"></i></span>
            <input type="text" ng-model="login.username" name="username" required ng-minlength="3" placeholder="username" />
        </div>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-lock"></i></span>
            <input type="password" ng-model="login.password" name="password" required ng-minlength="3" placeholder="" />
        </div>

        <div class="control-group">
            <input class="btn" type="submit" value="Log in">
        </div>

    </fieldset>
</form>

そして、コントローラ。

var controller = function($scope) {

    $scope.login = {
        submit: function() {

            Console.info($scope.login.username + ' ' + $scope.login.password);
        }
    }

};

問題は login.submit 関数は、入力が有効でない場合でも呼び出されます。この挙動を防ぐことは可能でしょうか?

余談ですが、私はbootstrapとrequirejsも使用しています。

解決方法は?

することができます。

<form name="loginform" novalidate ng-submit="loginform.$valid && login.submit()">

コントローラのチェックが不要になります。