【HTML】required属性を指定したが反応しない

Javaservletで簡単な管理Webシステムを作っています。
HTMLフォームでrequired属性を追加して未入力チェックをしたいのですが、うまくいきません。
調べたところカーソルを合わせると赤くなるようですが、デフォルトのまま、
「このフィールドは入力必須です」などのメッセージも表示されません。
送信ボタンを押すと通常どおり遷移してしまいます。
FireFox(var.52)、Chrome(var.48)で表示を試してみましたが、変わりませんでした。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- BootstrapのCSS読み込み -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="(略)" rel="stylesheet">
    <!-- jQuery読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="js/bootstrap.min.js"></script>
<title></title>
</head>
<body>
<center>
<ul id="menu">
  <li><a href="#">トップ</a></li>
  <li><a href="#">登録</a></li>
  <li><a href="#">検索</a></li>
  <li><a href="#">一覧</a></li>
</ul>
<form method="post" action="" class="form-horizontal">
  <br>
  <br>
  <br>  
   <div class="form-group">
	     <label for="name" class="control-label col-sm-4">ID:</label>   
	      <div class="col-sm-4">
   <input type="text" name="id" class="form-control" required="required">
   </div>
   </div>
   
<div class="form-group">
     <label for="name" class="control-label col-sm-4">なまえ:</label>   
     <div class="col-sm-4">
    <input type="text" name="name"  required="required" class="form-control">
       </div>
        <div class="col-sm-1">
              <select name="sex" class="form-control">
                 <option value="♂">♂</option>
                <option value="♀">♀</option> 
                 <option value="なし">なし</option>             
                  </select>
                   </div>
                   </div>
                   
                   	  <div class="form-group">
          <label for="name" class="control-label col-sm-4">とくせい:</label>   
	      <div class="col-sm-4">
        <input type="text" class="form-control" name="tokusei" required="required">
   </div>
      </div>

	<div class="form-group">  
	<label for="name" class="control-label col-sm-4">タイプ:</label>   
	<div class="col-sm-2">
 
<table>
  <tr>
    <td>
             <select class="form-control" name="type1" required>
                <option value="">--</option>
              </select>
      </td>
   <td>
            <select class="form-control" name="type2">
               <option value="">--</option>
             </select>
             </td>
  </tr>
  </table>
  </div>
      </div>
 <h3>種族値</h3>
<input type="text" size="5" placeholder="HP"name="sHP_d">
<input type="text" size="5" placeholder="攻撃"name="sAtt_d">
<input type="text" size="5" placeholder="防御"name="sDef_d">
<input type="text" size="5" placeholder="特攻"name="sSatt_d">
<input type="text" size="5" placeholder="特防"name="sSdef_d">
<input type="text" size="5" placeholder="素早"name="sQui_d">
   <br>

 <h3>個体値</h3>
<input type="text" size="5" placeholder="HP"name="kHP_d">
<input type="text" size="5" placeholder="攻撃"name="kAtt_d">
<input type="text" size="5" placeholder="防御"name="kDef_d">
<input type="text" size="5" placeholder="特攻"name="kSatt_d">
<input type="text" size="5" placeholder="特防"name="kSdef_d">
<input type="text" size="5" placeholder="素早"name="kQui_d">
   <br>
 <h3>努力値</h3>
<input type="text" size="5" placeholder="HP"name="eHP_d">
<input type="text" size="5" placeholder="攻撃"name="eAtt_d">
<input type="text" size="5" placeholder="防御"name="eDef_d">
<input type="text" size="5" placeholder="特攻"name="eSatt_d">
<input type="text" size="5" placeholder="特防"name="eSdef_d">
<input type="text" size="5" placeholder="素早"name="eQui_d">
   <br>
<div class="form-group">
  <h3>わざ</h3> 
  <ul class="list-inline">
  <li><input type="text" name="skill1" class="form-control"></li> 
  <li><input type="text" name="skill2" class="form-control"></li> 
  <li><input type="text" name="skill3" class="form-control"></li> 
  <li><input type="text" name="skill4" class="form-control"></li> 
  </div> 
   
<div class="form-group">
          <label for="name" class="control-label col-sm-4">メモ:</label>   
	      <div class="col-sm-4">
    <textarea name="memo" class="form-control" cols="3" rows="3"></textarea> 
   </div>
      </div>

<br>
   <input type="reset" class="button" value="リセット">
   <input type="submit" class="button" value="送信">
</center>
</form>

</body>
</html>

上記required="required"の部分をrequiredのみにしても結果は変わりませんでした。
cssでbootstrapを適用させているのですが、その場合requiredは使えない、ということはあるのでしょうか？
ちなみに、このコードを書いているファイル自体はjavaでなくhtmlファイルです。
何か違う部分などありましたらご指摘お願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

required属性によるチェックは「カーソルを合わせたとき」ではなく、submitしようとしたタイミングで行われます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<form method="post" action="" class="form-horizontal">
9
10    <div class="form-group">
11        <label for="name" class="control-label col-sm-4">ID:</label>
12        <div class="col-sm-4">
13            <input type="number" id="name" name="id" class="form-control" required="required">
14        </div>
15    </div>
16    <input type="reset" class="button" value="リセット">
17    <input type="submit" class="button" value="送信">
18</form>
19</body>
20</html>

追記

いくつか文法的な誤りを修正して検証した結果、問題が再現しませんでした。以下のコードを実行してみてください。また、今回は修正していませんが、center要素はHTML5で廃止されたので、いつ使えなくなってもおかしくありません。CSSで中央寄せをしましょう。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
8    <title>タイトル</title>
9</head>
10<body>
11<center>
12    <ul id="menu">
13        <li><a href="#">トップ</a></li>
14        <li><a href="#">登録</a></li>
15        <li><a href="#">検索</a></li>
16        <li><a href="#">一覧</a></li>
17    </ul>
18    <form method="post" action="" class="form-horizontal">
19        <br>
20        <br>
21        <br>
22        <div class="form-group">
23            <label for="name" class="control-label col-sm-4">ID:</label>
24            <div class="col-sm-4">
25                <input type="text" name="id" class="form-control" required="required">
26            </div>
27        </div>
28
29        <div class="form-group">
30            <label for="name" class="control-label col-sm-4">なまえ:</label>
31            <div class="col-sm-4">
32                <input type="text" name="name" required="required" class="form-control">
33            </div>
34            <div class="col-sm-1">
35                <select name="sex" class="form-control">
36                    <option value="♂">♂</option>
37                    <option value="♀">♀</option>
38                    <option value="なし">なし</option>
39                </select>
40            </div>
41        </div>
42
43        <div class="form-group">
44            <label for="name" class="control-label col-sm-4">とくせい:</label>
45            <div class="col-sm-4">
46                <input type="text" class="form-control" name="tokusei" required="required">
47            </div>
48        </div>
49
50        <div class="form-group">
51            <label for="name" class="control-label col-sm-4">タイプ:</label>
52            <div class="col-sm-2">
53
54                <table>
55                    <tr>
56                        <td>
57                            <select class="form-control" name="type1" required>
58                                <option value="">--</option>
59                            </select>
60                        </td>
61                        <td>
62                            <select class="form-control" name="type2">
63                                <option value="">--</option>
64                            </select>
65                        </td>
66                    </tr>
67                </table>
68            </div>
69        </div>
70        <h3>種族値</h3>
71        <input type="text" size="5" placeholder="HP" name="sHP_d">
72        <input type="text" size="5" placeholder="攻撃" name="sAtt_d">
73        <input type="text" size="5" placeholder="防御" name="sDef_d">
74        <input type="text" size="5" placeholder="特攻" name="sSatt_d">
75        <input type="text" size="5" placeholder="特防" name="sSdef_d">
76        <input type="text" size="5" placeholder="素早" name="sQui_d">
77        <br>
78
79        <h3>個体値</h3>
80        <input type="text" size="5" placeholder="HP" name="kHP_d">
81        <input type="text" size="5" placeholder="攻撃" name="kAtt_d">
82        <input type="text" size="5" placeholder="防御" name="kDef_d">
83        <input type="text" size="5" placeholder="特攻" name="kSatt_d">
84        <input type="text" size="5" placeholder="特防" name="kSdef_d">
85        <input type="text" size="5" placeholder="素早" name="kQui_d">
86        <br>
87        <h3>努力値</h3>
88        <input type="text" size="5" placeholder="HP" name="eHP_d">
89        <input type="text" size="5" placeholder="攻撃" name="eAtt_d">
90        <input type="text" size="5" placeholder="防御" name="eDef_d">
91        <input type="text" size="5" placeholder="特攻" name="eSatt_d">
92        <input type="text" size="5" placeholder="特防" name="eSdef_d">
93        <input type="text" size="5" placeholder="素早" name="eQui_d">
94        <br>
95        <div class="form-group">
96            <h3>わざ</h3>
97            <ul class="list-inline">
98                <li><input type="text" name="skill1" class="form-control"></li>
99                <li><input type="text" name="skill2" class="form-control"></li>
100                <li><input type="text" name="skill3" class="form-control"></li>
101                <li><input type="text" name="skill4" class="form-control"></li>
102            </ul><!-- ul要素の終了タグ -->
103        </div>
104
105        <div class="form-group">
106            <label for="name" class="control-label col-sm-4">メモ:</label>
107            <div class="col-sm-4">
108                <textarea name="memo" id="name" class="form-control" cols="3" rows="3"></textarea>
109            </div>
110        </div>
111
112        <br>
113        <input type="reset" class="button" value="リセット">
114        <input type="submit" class="button" value="送信">
115</center>
116</form>
117<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
118<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
119</body>
120</html>

投稿2017/07/06 10:23

編集2017/07/10 08:27

s8_chu

総合スコア14731

shi6na

2017/07/06 10:36

ご指摘ありがとうございます。 submitしたタイミングにチェックが行われるということは、submitを押した時点、ということでしょうか？もしそうでしたらsubmitボタンを押してもチェックが行われず、フォームに何も記入されていない状態でsubmitされてしまうのですが、いかがなものでしょうか。違っていたらすみません。

s8_chu

2017/07/06 10:40 編集

> submitしたタイミングにチェックが行われるということは、submitを押した時点、ということでしょうか？はい、そうです。 > submitボタンを押してもチェックが行われず、フォームに何も記入されていない状態でsubmitされてしまうのですがこちらではbootstrapを適用した状態でも、そうしなかった状態でも質問者さんのいうような現象が再現できませんでした。おそらく、現在質問文に書かれていないコードのなかに原因があるのだと思います。

shi6na

2017/07/10 01:12

ありがとうございます。質問文の方にコードを記載できる分だけ追記してみました。綺麗とは言えませんが、ほぼ全文ですので、よろしければご覧ください。

s8_chu

2017/07/10 08:34

追記しました。確認してみてください。

行動規範の内容に同意します

type="number"はまだブラウザによる誤差があるみたいで入力制限や
値のチェックもちょっと微妙ですね

たとえばnumberをやめてtextで数値限定にするなどで調整してみてはどうでしょうか？
要素の確定のためにdata-を利用してもいいかもしれません
またbluｒ時にalertするくらいはやってもいいかもしれませんが
blurチェックで不正データがあってもfocusするのはやめたほうがいいです

javascript
1NodeList.prototype.addEventListener=function(x,y,z){
2  Array.prototype.map.call(this,function(i){
3    i.addEventListener(x,y,z);
4  });
5}
6
7window.onload=function(){
8  document.querySelectorAll('[data-type=number]').addEventListener('input',function(e){
9    var v=this.value;
10    if(v.match(/[^0-9]/)){
11      this.value=v.replace(/[^0-9]+/,'');
12    }
13  });
14  document.querySelectorAll('[required]').addEventListener('blur',function(e){
15    if(this.value===""){alert('requred');}
16  });
17}
18

HTML
1<form>
2<input type="text" data-type="number" name="id" class="form-control" required="required" pattern="^[0-9]+$" placeholder="数値を入力">
3<input type="reset" class="button" value="リセット">
4<input type="submit" class="button" value="送信">
5</form>

投稿2017/07/06 13:31

編集2017/07/06 13:33