web-dev-qa-db-ja.com

HTML5必須属性が機能していないようです

HTML5の新しいrequired属性が機能していないように思える理由がわかりません。また、単純なコードで問題ないようです。この作業を行うにはどうすればよいですか？

HTMLのコードは次のとおりです。

<input type = "text" class = "txtPost" placeholder = "Post a question?" required>
<button class = "btnPost btnBlue">Post</button>

私が間違っている場合は修正しますが、ブラウザでコードを実行し、テキストボックスに値のないボタンをクリックすると、そのフィールドが必須であることを示すツールチップが表示されますか？ただし、ボタンを何度クリックしても何も起こりません。 必須属性の使用方法について誤解していますか？

Googleでコードを実行していますchrome Version 28.0.1500.72。

html5required
21
HTTP

フォームタグ内に入れて、入力タグを閉じてみてください。

<form>
  <input type = "text" class = "txtPost" placeholder = "Post a question?" required />
  <button class = "btnPost btnBlue">Post</button>
</form>
24
LDJ

Novalidate属性がフォームタグに設定されていないことを確認してください

22
Jinu Joseph Daniel

実際のところ、これを試したときは、フォームのアクションとメソッドの値を設定したときにのみ機能しました。しかし、それがどのように機能するのか面白いです！

2
Ram Kowshik

はい、フォームのカプセル化を見逃しました：

JSFiddle

<form>
   <input id="tbQuestion" type="text" placeholder="Post a question?" required/>
   <input id="btnSubmit" type="submit" />
</form>
0
speti43

私の答えは手遅れですが、他の人を助けることができます。

フォームタグを使用した場合でも、同じ問題が発生しました。

ページのヘッダーでメタ文字セットを宣言することで解決しました。

<meta charset = "UTF-8" />
0
Kamal AZIZ