input要素のrequired属性を使用することができない。HTML

Question

実現したいこと

input要素のrequired属性でボタンをクリックしたときにエラーを表示させることができるとウェブサイトに書いていたのですがなぜか私のファイルでは表示されません。違いを教えてください。一応そのウェブサイトを載せておきます。https://techacademy.jp/magazine/23857
あと、これってformで囲う必要はありますか?

該当のソースコード

まずちゃんとエラーが表示されるウェブサイトにあった物

<form action=''>
  <input type='text'required>
  <input type='text'required>
  <input type="submit" value="送信">
</form>

そして私の出来ない方（数値限定にしたいのでnumberにしています。）

<form action=''>
<input type="number" required>
<input type="number" required>
<input type="button" value="SEARCH">
</form>

補足情報

表示に利用しているのはGoogle Chromeなので対応していないブラウザということはないと思います。

Answer 1

出来ない方

は、type=buttonですからただのボタンです
ボタンを押すだけではサブミットされませんのでエラーも表示されません

Comments

[otohu_0401]

ご丁寧にご回答ありがとうございます!!

Answer 2

ブラウザによってrequiredは効いたり効かなかったりしたと思います
formをsubmitすることで発動されるのでformはいるかと思います
違っていたらすみません。。。

Comments

[otohu_0401]

ありがとうございます!できました。結構単純な間違えなんで、なんで気づかなかったのかと思ってますｗ