たまにJavascript（addEventListener）が動作しない

Question

仕様
入力必須の２つのラジオボタンから成る入力フォーム２組があり、Saveボタンをクリックすると不可視にしている３つのテキストボックスそれぞれに、保存日時、２組のラジオボタンの選択状況を１か０に変換して保存しています。
エラー内容
このページには１日に数十から１５０件前後の入力があり、数百件に１件程度、不可視のテキストボックスに何も保存されない入力データが発生します。入力端末はiPhoneのSafariが確認されていますが全件確認できていません。このエラーは特定の時間、ユーザに限定されません。
知りたいこと
再現ができず、困っています。原因が分かる方がいらっしゃいましたらご教示いただけますと幸いです。よろしくお願いいたします。

追記
テキストボックスにrequiredを設定してはとコメントをいただきました。
ユーザの画面上はラジオボタンが正しく選択されているのに「不可視のテキストボックス」のrequired設定のために保存できなくなると混乱を招くかと思い、手を出せないでいます。 現状は空欄が発生した時にメールを管理者に飛ばすようにして管理者側で修正しています。

また、最初ユーザ側で「javascriptを使用しない」設定でもしているのかと思いましたが確認できた数人は通常の使用でした。

<table>
  <tbody>
    <tr>
      <td class="kdmn">
        <fieldset>
          <input name="fluits" value="1" type="radio"></input>
          <label>りんご</label>
          <br>
          <input name="fluits" value="2" type="radio"></input>
          <label>みかん</label>
        </fieldset>
      </td>
    </tr>
    <tr>
      <td class="iro">
        <fieldset>
          <input name="colors" value="1" type="radio"></input>
          <label>あか</label>
          <br>
          <input name="colors" value="2" type="radio"></input>
          <label>みどり</label>
        </fieldset>
      </td>
    </tr>
    <tr class="fukashi">
      <td>
        <div class="date">
          <input class="date" type="text">
          </input>
        </div>
      </td>
    </tr>
    <tr class="fukashi">
      <td>
        <div class="t_kdmn">
          <input class="t_kdmn" type="text">
          </input>
        </div>
        <div class="t_iro">
          <input class="t_iro" type="text">
          </input>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<input value="Save" type="submit" id="id_submitbutton_save"></input>

  //時間
  var timestmp = document.body.querySelector("input.date");
  var subSave = document.getElementById('id_submitbutton_save');
  subSave.addEventListener("click", function(evt0) {
    //代入と入力必須で使用
    var radios = document.querySelectorAll("input[type=radio]");
    var t_kdmn = document.querySelector("input.t_kdmn");
    var t_iro = document.querySelector("input.t_iro");
    //くだものを代入
    if (radios[0].checked) {
      t_kdmn.value = "1";
    } else if (radios[1].checked) {
      t_kdmn.value = "0";
    }
    //色を代入
    if (radios[2].checked) {
      t_iro.value = "1";
    } else if (radios[3].checked) {
      t_iro.value = "0";
    }
    timestmp.value = "";
    var now = new Date();
    var dayOfWeekStrJP = ["日", "月", "火", "水", "木", "金", "土"];
    var datetime = ('0' + (now.getMonth() + 1)).slice(-2) +
      '/' + ('0' + now.getDate()).slice(-2) +
      '（' + dayOfWeekStrJP[now.getDay()] + '）' +
      ('0' + now.getHours()).slice(-2) + ':' +
      ('0' + now.getMinutes()).slice(-2);
    timestmp.value = datetime;
    if (!(radios[0].checked || radios[1].checked)) {
      // イベントキャンセル
      evt0.preventDefault();
      alert("くだものを選択してください");
    }
    if (!(radios[2].checked || radios[3].checked)) {
      // イベントキャンセル
      evt0.preventDefault();
      alert("色を選択してください");
    }
    evt0.stopPropagation(); // イベントの伝播を止める
  });

.fukashi {
  display: none;
}

Comments

[yambejp]

よくわかりませんが「可視のテキストボックスに何も保存されない入力データが発生」を防ぎたいだけならrequired設定だけでなんとかなりませんか？クライアント側の不正処理のせいかもしれないのでサーバー側でもバリデートは必要かもしれませんが

[TakuTakahashi]

コメントありがとうございます。ユーザの画面上はラジオボタンが正しく選択されているのに「不可視のテキストボックス」のrequired設定のために保存できなくなると混乱を招くかと思い、手を出せないでいます。
現状は空欄が発生した時にメールを管理者に飛ばすようにして管理者側で修正しています。（後出しで申し訳ありません）