###前提・実現したいこと
既存のソースコードにて、
複数ページに渡り入力を促すモーダルの表示を行っています。
今まで、入力内容の有効・無効関係なしに次へ進めるようになっていましたが、
無効な値を入力されれば「次へ」ボタンを無効にし
次へ進めなくしようとしています。
使用しているのはAngularJS。
それとBootstrapと思われます。
###発生している問題・エラーメッセージ
例えば、2ページ目で無効な値を入力して「次へ」ボタンが無効な状態にし、
前のページに戻ると「次へ」ボタンが無効なままになり
次へ進む事ができなくなります。
###該当のソースコード
※現在手元にソースコードが無いため、ひとまずは記憶の範囲で失礼致します
※追記・修正するかもしれません(2016/12/26 更新)
<form name="userform" role="form" class="form-horizontal"> <div ng-show="modalPage == 1" class="page-1"> <input type="text" name="firstName" ng-model="user.name" required> </div> <div ng-show="modalPage == 2" class="page-2"> <input type="text" name="age" ng-model="user.age" required> </div> ... </form> <div class="col-sm-8"> <button id="prevbtn" ng-show="1 < modalPage">prev</button> <button id="nextbtn" ng-valiable="user.$invalid || !user.$dirty" ng-show="modalPage < 3">next</button> <button id="submitbtn" ng-valiable="user.$invalid || !user.$dirty" ng-show="modalPage == 3">submit</button> </div>
上記の例でいくと、2ページ目の入力欄で何かを入力して、その入力を消すと「$error.required」になるかと思います。
その状態で「prev」ボタンで前ページに戻ると、「next」ボタンが無効のままになってしまいます。
「次へ」ボタンの有効・無効の判断をページ毎にさせるのが理想だと思うのですが
どのように指定すれば良いかわからず悩んでいます。
情報が鮮明じゃない形での質問、もうしわけございませんが
「このチュートリアルを見れば良いのではないか」などの情報提供を頂ければ幸いです。
何卒宜しく御願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/27 08:58