テーマ、知りたいこと

HTMLの<input type="radio">について、「グループ内の連動を行う」「フォーム送信に値は載せない」「未チェックのままだと、フォーム送信時に送信を阻止して、invalidイベントを反応させる」の3つすべてを満たす方法は存在するのか

状況

フォーム内に「フォーム送信はしたくないけど必須のバリデーションは当てたいラジオボタン」が存在していたので、<input type="radio" required>に、form="でたらめなID"と足していました。ところが、いつしか別フォームを指す<input>要素ではフォーム送信を止められない状態となってしまっていました。

ふつうのフォーム要素ならnameを未設定とすれば、フォーム送信に値が入らなくなるので何ら問題はありません。ところが、ラジオボタンの場合にはnameが「フォーム送信時のキー」以外に「複数のボタンを連動させるためのキー」としても使われているので、同じキーを設定せざるを得ません。

参考HTML

html
1<form action="#">
2  <label>
3    <input type="radio" name="foo" form="dummy" required>
4    hoge
5  </label>
6  <label>
7    <input type="radio" name="foo" form="dummy" required>
8    piyo
9  </label>
10  <!-- ラジオボタンを非選択のままにしても、送信が止まらない -->
11  <input type="submit">
12</form>
13<!-- idに合致するformを置いても改善せず -->
14<form action="" id="dummy"></form>

考えたこと

とりあえず、以下のような策は考えています。

適当なnameで値が送信されてしまうのは無視する
nameをセットせずに、ラジオボタン同士のチェック制御もJavaScriptで行う
formをセットしたままでも:invalidセレクタで拾うことは可能なので、フォーム送信時のエラーハンドリングを自前で行う

なお、valueなしではkey=onとして送信が行われるし、value=""と明示してもkey=がフォーム送信の値に入ってしまうため、対策となりませんでした。

これらより簡潔、かつ値がフォーム送信されないような手段がありましたらご教示いただけましたら幸いです。

環境

ブラウザ運用なので、Chrome、Firefox、Safari、Edgeの各最新版で動かすことを念頭に置いています。

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

回答1件

そもそも不要なパラメータであっても受け取った側で無視すれば良いだけのような気がしますが、そこはおいておいて
javascriptで処理するならformdataイベントを利用して不要なパラメータを削除するとよいでしょう。
不要な要素に例えばカスタムデータ（data-nosend）を付与して飛ばさなくするならこんな感じ

html
1<script>
2document.addEventListener('formdata',e=>{
3  const form=e.target;
4  const nosendnames=[...new Set([...form.querySelectorAll('[data-nosend]')].map(x=>x.name))];
5  nosendnames.forEach(x=>e.formData.delete(x));
6});
7</script>
8
9<form action="#">
10<label><input type="radio" name="foo" value="1" data-nosend required>hoge</label>
11<label><input type="radio" name="foo" value="2" data-nosend required>piyo</label>
12<input name="xxx" value="1">
13<input name="yyy" value="2">
14<input name="zzz" value="3" data-nosend> <!--普通の要素でもOK-->
15<input type="submit">
16</form>

なお、ダミーであってもラジオボタンのvalueは設定しておかないと同じ値だと切り替えたことを認知してくれない場合がありますのでご留意ください

強制書き換え

自分のページを強制的に書き換えるにはfetchして自分自身のhtmlを書き換えることになりそうですが、流石に強引すぎてあまりおすすめはできないですね

html
1<script>
2document.addEventListener('formdata',e=>{
3  new Set([...e.target.querySelectorAll('[data-nosend]')].map(x=>x.name)).forEach(x=>e.formData.delete(x));
4});
5document.addEventListener('invalid',e=>{
6  console.error(e.type);
7},true);
8window.addEventListener('submit', e => {
9  e.preventDefault();
10  fetch(location.href).then(res=>res.text()).then(html=>{
11      document.querySelector('html').innerHTML=html;
12    });
13});
14</script>
15<form action="#">
16<label><input type="radio" name="foo" value="1" data-nosend required>hoge</label>
17<label><input type="radio" name="foo" value="2" data-nosend required>piyo</label>
18<input name="xxx" value="1">
19<input name="yyy" value="2">
20<input name="zzz" value="3" data-nosend>
21<input type="submit">
22</form>

投稿2025/07/03 03:21

編集2025/07/03 08:44

yambejp

総合スコア117918

yambejp

2025/07/03 07:30

追記：chromeあたりだとパラメータが同じだとsubmitがキャンセルされますね location.reload()してもキャッシュを読んでしまってサーバー側にデータを取りにいかないようです。キャッシュを抑制するには結局getパラメータを調整しないといけないので要望によっては実現が難しいかもしれません。