input type buttonでのrequiredが効かない。

Question

###実現したいこと
ボタンタイプのonclickで送信するフォームで入力必須項目を設定したい。
input typeをsubmitにすると、入力中のEnterで送信してしまう為、input type=buttonにしています。Enterを押した時に、送信しない処理でも構いません。

<form action="edit.php" method="post">

<input type ="text" name="workgroup" style="width:100px" required>
他のinput項目～～

<input type="button" class ="add" value="追加" onclick="window.location.reload(true),submit();">

Answer 1

どういう処理をしたいのかがわかりませんが、window.location.reload(true),submit(); のsubmit();はその前にページがリロードされてしまうため実行されないと思います。

【Location.reload() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Location/reload

Comments

[kingkamehameha]

その前のリロードで、処理は終了するという訳ですね。
なんとかデーターベースには書き込まれているようです。

Answer 2

required属性は、HTMLの仕様としてform送信する場合に機能するものと思われます。
よって、type="button"は、HTMLの仕様としては、何もしない、ボタンなので、
JavaScriptでの、requiredに相当する処理をしなければいけないのかと。

Enterを押した時に、送信しない処理でも構いません。

お察しの通り、type="submit"の場合は、required属性が機能しますが、Enterキー押下時の処理が必要になるでしょう。
しかし、これにはお答えしません。
なぜなら、まず自身でやってみたというコードがなければ、やりたいことだけを述べた丸投げ質問に該当するからです。
まずはご自分で調べましょう。

Comments

[kingkamehameha]

ありがとうございます。
<form>内にonsubmit="return false;を追加する事で防げました。