私は、ユーザー名とパスワードが空でなく、3 文字より長いことを確認するために、クライアント側の入力検証を備えた AngularJS を使用して簡単なログイン フォームを作成しています。以下のコードを参照してください。
<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 も使用していることを述べておきます。
ベストアンサー1
できるよ:
<form name="loginform" novalidate ng-submit="loginform.$valid && login.submit()">
コントローラーのチェックは不要です。