Q&A
HTMLを追記していただけませんか？
こんにちは、いつもありがとうございます。
Cakephp3で時間割システムを作っています。
困っているのは、Bootstrapのバリデーションを使ってフォームの値をチェックしています。
イベントはfocusoutですが、写真のようにマウスでフォーカス与えたあとフォーカスを外すと、必須項目というエラーが表示されます。
これを、リセットボタンを押すことで削除したい（reloadやrefreshではなく）ですが、input type="reset" では上手くできませんでした。
何か他の方法はありませんか？
現在、リセットボタンを押すと処理されるのは以下のようです。全てのフォームをリセットするコードです。
よろしくお願いします。
Javascript
1function clearFormAll() { 2 for (var i=0; i<document.forms.length; ++i) { 3 clearForm(document.forms[i]); 4 } 5} 6function clearForm(form) { 7 for(var i=0; i<form.elements.length; ++i) { 8 clearElement(form.elements[i]); 9 } 10} 11 12function clearElement(element) { 13 14 if(element.readOnly !== true) 15 { 16 switch(element.type) { 17 case "hidden": 18 case "submit": 19 case "reset": 20 case "button": 21 case "image": 22 return; 23 case "file": 24 return; 25 case "text": 26 case "password": 27 case "textarea": 28 element.value = ""; 29 return; 30 case "email": 31 element.value = ""; 32 return; 33 case "checkbox": 34 case "radio": 35 element.checked = false; 36 return; 37 case "select": 38 case "select-one": 39 case "select-multiple": 40 $('select').each(function() { 41 $(this).children('option').removeAttr('selected'); //optionのselected要素の削除 42 this.selectedIndex= -1; //selectIndexを0に設定。 43 }); 44 return; 45 default: 46 } 47 48 } 49 else 50 { 51 return false; 52 } 53 54}
[追加]
HTMLはこんな感じです。
<!-- backgroundとログインフォームのスタイルシート定義 --> <style type="text/css"> body { background: url(/img/classroom.png) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .panel-default { opacity: 0.9; margin-top:30px; } .panel-info { opacity: 0.9; margin-top:30px; } .form-group.last { margin-bottom:0px; } </style> <!-- ログインフォーム領域 --> <div class="container"> <div class="row"> <div align="center"> <h2 class="form-signin-heading">大学時間割作成支援システム</h2> </div> <!--Flashメッセージ表示のためレンダリング--> <?= $this->Flash->render(); ?> <div class="col-md-6 col-md-offset-3"> <div class="panel panel-default"> <div class="panel-heading"> <span class="glyphicon glyphicon-lock"></span> ログイン </div> <div class="panel-body"> <?= $this->Form->create(null,['class'=>'form-horizontal']) ?> <div class="form-group"> <div class="col-xs-10 col-xs-offset-1"> <?= $this->Form->input('customer_no', ['class' => 'form-control','label'=>'契約番号']) ?> </div> </div> <div class="form-group"> <div class="col-xs-10 col-xs-offset-1"> <?= $this->Form->input('account', ['class' => 'form-control','label'=>'アカウント','type' => 'text']) ?> </div> </div> <div class="form-group"> <div class="col-xs-10 col-xs-offset-1"> <?= $this->Form->input('password', ['class' => 'form-control','label'=>'パスワード']) ?> </div> </div> <div class="form-group last"> <div class="col-sm-offset-4 col-sm-8"> <?= $this->Form->button('リセット', ['type'=>'button','class' => 'btn btn-default btn-sm', 'onClick' => 'clearFormAll()']); ?> <?= $this->Form->button('ログインする', ['type'=>'button','class' => 'btn btn-primary btn-sm', 'onClick' => 'submit()']); ?> </div> </div> <?= $this->Form->end() ?> </div> <div class="panel-footer" align="right"> <input id="link" type="button" value="パスワード変更" class="btn btn-success btn-sm" onmousedown="location.href='./users/change'" /> </div> </div> </div> </div> <!-- お知らせ表示領域 --> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title"><strong>お知らせ</strong></h3> </div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item">2018月XX月XX日：大学時間割システムの提供開始！</li> <li class="list-group-item">2017月XX月XX日：マスタ機能のリニューアル</li> <li class="list-group-item">2017月XX月XX日：マスタ複与機能の追加</li> <li class="list-group-item">2017月XX月XX日：お正月休みのお知らせ</li> <li class="list-group-item">2017月XX月XX日：大学時間割作成支援システムのテスト運営開始！</li> </ul> </div> </div> </div> </div>
「追加記述ー試してみました。」
教えてくださってありがとうございました。
しかし、以下のコードは、テキストボックスの赤い線のみ消えて、メッセージとXボタンはそのままでした。
Javascript
1$(".form-group").removeClass('has-error');
あと、子のコードは、Uncaught TypeError: $(...).validator is not a function エラーでした。
Javascript
1$(this.form).validator('destroy').validator();
回答2件
0
Bootstrap3のvalidationの仕様では必須項目に対して、フォーカスが外れた際に入力条件を満たしていなかったら以下のdivのform-groupクラスに対して has-error クラスが与えられます。
以下エラーの際の例です。
css
1<div class="form-group has-danger has-error"> 2 <label for="youremail" class="control-label">メールアドレス<span class="require">必須</span></label> 3 <input type="email" class="form-control" name="_email" id="email" placeholder="contact@mail.its-office.jp" data-error="メールアドレスは入力必須です" required=""> 4 <div class="help-block with-errors"><ul class="list-unstyled"><li>メールアドレスは入力必須です</li></ul></div> 5 </div>
そのため、resetボタンを押した時にすべきことは、全てのform-groupクラスからhas-errorクラスを取り除くことになります。HTMLのコードがないため正確なことはいえないですが、jQueryでは以下のようにclassを取り除くことができそうです。
javascript
1 $(".form-group").removeClass('has-error');
###追記
formから外れる際に出現するものはhas-errorクラスだけではなくエラーメッセージとinputの中にspanタグで×が表示されますのでそちらもそれぞれresetボタンを押すことで消す必要があります。
エラーメッセージは以下。
html
1<ul class="list-unstyled"><li>このフィールドを入力してください。</li></ul>
inputタグに入る×というspanタグのもの。
html
1<span class="glyphicon form-control-feedback glyphicon-remove" aria-hidden="true"></span>
です。
Javascriptにてこちらも消すことが可能です。
投稿2017/12/20 13:39
編集2017/12/21 08:15
総合スコア1809
ご回答ありがとうございました。しかし、テキストボックスの色は消えましたが、他のものは残ったままでした。そこで、help-bolockなどもremoveClassで削除したいと思って試してみましたが、やはり色が黒に代わって残ったままでした。
こちらのhelp-bkickはテキストが書かれておりますので。help-blockの子要素ulの子要素liを消す必要があります。jQueryでいう.remove()を使用すると良いかもしれないです。http://uxmilk.jp/10889
0
ベストアンサー
単に一度破棄すればいいかもしれません。
HTML
1<input type="reset" class="btn" onclick="$(this.form).validator('destroy').validator();" />
投稿2017/12/21 03:19
総合スコア13749
ご回答ありがとうございました。しかし、残念ながらエラーでした。
Uncaught TypeError: $(...).validator is not a function が表示されました。
Bootstrap3のValidationというのは、これではありませんでしたか？
http://1000hz.github.io/bootstrap-validator/
何を使っているのでしょうか？
Bootstrap 3はclassによる検証の"スタイル"しかなく、勝手に何かするわけではありません。
https://getbootstrap.com/docs/3.3/css/#forms-control-validation
そのため、上記のようなスクリプトを導入しているかと思ったのですが、そうでなければ自前で実装しているはずです。その逆をすればいいです。
それとも4を使っていたというオチもありますか？
あなたの回答
tips
プレビュー
