[解決済み] 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()">
コントローラのチェックが不要になります。
関連
-
[解決済み] AngularJSのng-showとフェードアニメーション
-
[解決済み] エラーです。10回の$digest()反復に達しました。動的なsortby述語で中断!?
-
[解決済み] Angularのui-routerでデフォルトの状態を設定する方法
-
[解決済み] 誰かangularjsの$qサービスの使用について説明してください。[重複しています]。
-
[解決済み] AngularJS 。scope.apply()呼び出し時の$digest already in progressエラーを防ぐ。
-
[解決済み] Angular JSによるシンプルなポップアップ
-
[解決済み] なぜAngularJSはselectに空のオプションを含めるのですか?
-
[解決済み] HTML5 form 要素の検証を無効にする
-
[解決済み] 子コントローラから親スコープにアクセスするAngularJS
-
[解決済み] AngularJSのフォームにカスタム検証を追加するには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】angularのonLoadとng-initの違いについて
-
[解決済み] angularのpostリクエストでpreflightのレスポンスがHTTPステータスコード403で不正になる。
-
[解決済み] AngularJs ReferenceError: $http is not defined
-
[解決済み] Angular JS $locationChangeStart 次の url ルートオブジェクトを取得する
-
[解決済み] AngularJSのディープリンクとは何ですか?
-
[解決済み] AngularJSの$parentは何を意味するのですか?
-
[解決済み] AngularJSの「href」と「ng-href」の違いについて
-
[解決済み] Angularjsを使用してローカルストレージにデータを保存するにはどうすればよいですか?
-
[解決済み] Angular.js: $evalの仕組みとバニラevalとの違いは何ですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?