Q&A
コードは1行用の`文字列`ではなく下記のようにしてください。
```言語名
コード
```
↑最後改行必要
入力フォームで、bootstrapのvalidatorチェックを使っています。
ただ、この場合でキャンセルに使っている、formnovalidateが無効になってしまい、キャンセルができない状態です。
html
1<form data-toggle="validator" class="form-horizontal" action="/put" method="post"> 2 <div class="row"> 3 <div class="col-md-6"><!-- left column --> 4 <div class="box-body"> 5 <div class="form-group"> 6 <label class="control-label col-xs-3">氏名<span style="color:red">必須</span></label> 7 <div class="col-xs-9"> 8 <input id="name" type="text" name="name" class="form-control" required> 9 </div> 10 </div> 11 </div> 12 </div><!-- end right columnt --> 13 </div><!-- end row --> 14 <div class="col-md-12"><!-- full column --> 15 <button type="submit" class="btn btn-primary" name="btn" value="ok">登録</button> 16 <button type="submit" class="btn btn-warning" name="btn" formnovalidate="formnovalidate" value="can">キャンセル</button> 17 </div><!-- end full columnt --> 18</form>
これで、formの「data-toggle="validator"」をはずすと、formnovalidateが有効になります。
なにか、validatorが有効なとき、ボタンが押せるようになる方法ありませんでしょうか？
よろしくお願いします。
回答1件
0
ベストアンサー
Bootstrap 3, bootstrap-validator 0.11.9 を使っていると仮定して回答をします。
質問文にある、「bootstrap-validator により submit ボタンがデフォルトで無効になってしまう」問題の原因は、 bootstrap-validator の disable オプションがデフォルトでtrueとなっていることです。
|Name|type|default|description|
|:--|:--|:--|:--|
|...|...|...|...|
|disable |boolean |true |Disable the submit button until the form is valid and all required fields are complete.|
参考: Validator, for Bootstrap 3 - Options
ここで、解決策として、以下の 2 つが考えられます。
- キャンセルボタンの
disabledクラスだけを除外する
ボタンの有効無効は、disabledクラスにより処理されます。そのため、disabledクラスを JavaScript を用いて除外すれば良いです。しかし、disabledクラスを除外したとしても、 submit 処理が行われるとき、バリデーターにより submit が拒否され、その対応に手間がかかります。
button[type="button"]要素を使う
これは、上に挙げた方法よりも比較的に簡単な対応策で、バリデーターが関知しないbutton[type="button"]要素を使うことで、バリデーターの目を盗もうという考え方です。しかし、この場合にはクリックするだけでは submit 処理が行われないため、別途 JavaScript で submit 処理を行う必要があります(動作確認用リンク)。
結局、以上のことや bootstrap-validator がformnovalidate属性に対応していないことなどを考慮すると、この方法が一番楽だと思います。
投稿2019/03/04 23:08
編集2019/03/04 23:10
総合スコア14731
あなたの回答
tips
プレビュー
