\r\n \r\n \r\n\r\n\r\n\r\n
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n\t \r\n\t
\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n \r\n \t
\r\n \r\n\t
\r\n \r\n
\r\n
\r\n\r\n\t
\r\n\t \r\n\t
\r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n

種族値

\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n\r\n

個体値

\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n

努力値

\r\n\r\n\r\n\r\n\r\n\r\n\r\n
\r\n
\r\n

わざ

\r\n
    \r\n
  • \r\n
  • \r\n
  • \r\n
  • \r\n
\r\n \r\n
\r\n \r\n\t
\r\n \r\n
\r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\r\n上記required=\"required\"の部分をrequiredのみにしても結果は変わりませんでした。\r\ncssでbootstrapを適用させているのですが、その場合requiredは使えない、ということはあるのでしょうか?\r\nちなみに、このコードを書いているファイル自体はjavaでなくhtmlファイルです。\r\n何か違う部分などありましたらご指摘お願いいたします。","answerCount":2,"upvoteCount":0,"datePublished":"2017-07-06T10:15:05.877Z","dateModified":"2017-07-10T01:09:47.821Z","acceptedAnswer":{"@type":"Answer","text":"[required属性](http://www.htmq.com/html5/input_required.shtml)によるチェックは「カーソルを合わせたとき」ではなく、**submitしようとしたタイミングで行われます**。\r\n```HTML\r\n\r\n\r\n\r\n \r\n タイトル\r\n\r\n\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n\r\n\r\n```\r\n追記\r\n---\r\nいくつか文法的な誤りを修正して検証した結果、問題が再現しませんでした。以下のコードを実行してみてください。また、今回は修正していませんが、**center要素はHTML5で廃止された**ので、いつ使えなくなってもおかしくありません。**CSSで中央寄せをしましょう**。\r\n```HTML\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n タイトル\r\n\r\n\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n

種族値

\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n

個体値

\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n

努力値

\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n

わざ

\r\n
    \r\n
  • \r\n
  • \r\n
  • \r\n
  • \r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n\r\n\r\n\r\n\r\n\r\n```","dateModified":"2017-07-10T08:27:47.330Z","datePublished":"2017-07-06T10:23:06.831Z","upvoteCount":5,"url":"https://teratail.com/questions/83127#reply-130405"},"suggestedAnswer":[{"@type":"Answer","text":"type=\"number\"はまだブラウザによる誤差があるみたいで入力制限や\r\n値のチェックもちょっと微妙ですね\r\n\r\nたとえばnumberをやめてtextで数値限定にするなどで調整してみてはどうでしょうか?\r\n要素の確定のためにdata-を利用してもいいかもしれません\r\nまたblur時にalertするくらいはやってもいいかもしれませんが\r\nblurチェックで不正データがあってもfocusするのはやめたほうがいいです\r\n\r\n```javascript\r\nNodeList.prototype.addEventListener=function(x,y,z){\r\n Array.prototype.map.call(this,function(i){\r\n i.addEventListener(x,y,z);\r\n });\r\n}\r\n\r\nwindow.onload=function(){\r\n document.querySelectorAll('[data-type=number]').addEventListener('input',function(e){\r\n var v=this.value;\r\n if(v.match(/[^0-9]/)){\r\n this.value=v.replace(/[^0-9]+/,'');\r\n }\r\n });\r\n document.querySelectorAll('[required]').addEventListener('blur',function(e){\r\n if(this.value===\"\"){alert('requred');}\r\n });\r\n}\r\n\r\n```\r\n\r\n```HTML\r\n
\r\n\r\n\r\n\r\n
\r\n```","dateModified":"2017-07-06T13:33:11.303Z","datePublished":"2017-07-06T13:31:04.215Z","upvoteCount":0,"url":"https://teratail.com/questions/83127#reply-130432","comment":[{"@type":"Comment","text":"ご指摘ありがとうございます。当方が試した際にはtextもnumberも反応しないようでした。\r\njavascriptはまだ手を付けていないため、できるだけhtmlのみで解決したいのですが、やはり未入力チェックをするとすればjavascriptが適正なのでしょうか。","datePublished":"2017-07-10T01:13:39.727Z","dateModified":"2017-07-10T01:17:26.946Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/HTML5","name":"HTML5に関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/83127","name":"【HTML】required属性を指定したが反応しない"}}]}}}
質問するログイン新規登録

Q&A

解決済

2回答

23560閲覧

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

shi6na

総合スコア14

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2017/07/06 10:15

編集2017/07/10 01:09

0

1

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ファイルです。
何か違う部分などありましたらご指摘お願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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

0

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

たとえばnumberをやめてtextで数値限定にするなどで調整してみてはどうでしょうか?
要素の確定のためにdata-を利用してもいいかもしれません
またblur時に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
yambejp

総合スコア118169

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shi6na

2017/07/10 01:17 編集

ご指摘ありがとうございます。当方が試した際にはtextもnumberも反応しないようでした。 javascriptはまだ手を付けていないため、できるだけhtmlのみで解決したいのですが、やはり未入力チェックをするとすればjavascriptが適正なのでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問