フォームで日付欄を未選択でもエラーを出さないようにしたい

Question

フォーム内容をSalesforceに連携した際に、
日付にNullのレコードが含まれているとエラー通知が届きます。

ただ必須項目ではなく任意項目のまま進めたいので、
項目がnullや空白だった場合、
裏で、デフォルト値を入れてエラーを回避したいです。

またツールの仕様で、formタグのsubmitイベントやinput(type=submit)のclickイベントを設定できません。

対策としてこちらのフォーマットにすることなのですが、はめてできないでしょうか。

//登録フォームの確認画面（submitボタンのname値が__commit）のサンプルコード
<script>
    var submitFormCustomFunc = function (button_name, exec_submit){
    if (button_name === "__back") {
            // 戻るボタンが押された処理を書く
            alert("戻るボタンが押されました");
            exec_submit();
    } else if (button_name === "__commit") {
            // 送信ボタンが押された処理を書く
            alert("送信ボタンが押されました");
            exec_submit();
    }
}
</script>

ソースはこちらです。

<form action="/tykz2/m" method="post" autocomplete="off">
    <table class="">
    <tr class="">
      <th id="th_33">日付</th>
      <td id="td_33">
        
        <select name="e_33[year]" id="select_year">	
          <option value="">年</option>
          <option value="2022">2022年</option>
          <option value="2023">2023年</option>
        </select>
        
        <select name="e_33[month]" id="select_month">	
          <option value="">月</option>
          <option value="1">01月</option>
          <option value="2">02月</option>
        </select>
        
        <select name="e_33[day]" id="select_day">	
          <option value="">日</option>
          <option value="1">01日</option>
          <option value="2">02日</option>
          <option value="3">03日</option>
          <option value="4">04日</option>
        </select>  
        
      </td>
    </tr>
    </table>

<div class="box" id="b9">
<input type="submit" name="__send" id=".__send" value="確認画面へ" />
</div>
</form>
コード

 document.getElementById('.__send').addEventListener('click', function(){

    var select_year = document.getElementById('select_[year]').value;
    var select_month = document.getElementById('select_[month]').value;
    var select_day = document.getElementById('select_[day]').value;

  if (select_year == null || select_year == '') {
    select_year = "1";
  }
  if (select_month == null || select_month == '') {
    select_month = "1";
  }
  if (select_day == null || select_day == '') {
    select_day = "1";
  }

});
コード

Answer 1

select_[year]というidの要素はありません(month,dayも同様)
単純にセレクトボックスにデフォルト値を設定しておけばいいだけの話だ思いますが・・・

sample

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#__send').addEventListener('click', e=>{
    e.preventDefault();
    const y=select_year.value;
    const m=select_month.value;
    const d=select_day.value;
    console.log([y,m,d]);
  });
});
</script>
<form method="post">
        <select name="e_33[year]" id="select_year">	
          <option value="2022">2022年</option>
          <option value="2023">2023年</option>
        </select>
        
        <select name="e_33[month]" id="select_month">	
          <option value="1">01月</option>
          <option value="2">02月</option>
        </select>
        
        <select name="e_33[day]" id="select_day">	
          <option value="1">01日</option>
          <option value="2">02日</option>
          <option value="3">03日</option>
          <option value="4">04日</option>
        </select>
<div>
<input type="submit" name="__send" id="__send" value="確認画面へ" />
</div>
</form>

エラーはエラーとする

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelector('#__send').addEventListener('click', e=>{
    e.preventDefault();
    const y=select_year.value;
    const m=select_month.value;
    const d=select_day.value;
    if(y==""){
      select_year.focus();
      alert('年を選んでください');
      return false;
    }
    if(m==""){
      select_month.focus();
      alert('月を選んでください');
      return false;
    }
    if(d==""){
      select_day.focus();
      alert('日を選んでください');
      return false;
    }
    console.log([y,m,d]);
  });
});
</script>
<form method="post">
        <select name="e_33[year]" id="select_year">	
          <option value="">年</option>
          <option value="2022">2022年</option>
          <option value="2023">2023年</option>
        </select>
        
        <select name="e_33[month]" id="select_month">	
          <option value="">月</option>
          <option value="1">01月</option>
          <option value="2">02月</option>
        </select>
        
        <select name="e_33[day]" id="select_day">	
          <option value="">日</option>
          <option value="1">01日</option>
          <option value="2">02日</option>
          <option value="3">03日</option>
          <option value="4">04日</option>
        </select>
<div>
<input type="submit" name="__send" id="__send" value="確認画面へ" />
</div>
</form>

Comments

[mandelin]

>select_[year]というidの要素はありません

select_yearにすればいいでしょうか。

>セレクトボックスにデフォルト値を設定する

こちらがあまりわかっておりません。
・select_year = “default”;　にする
・optionタグにselectedやhiddenをつけておく
ということでしょうか。。

[yambejp]

value=""の値が選べないようにしてくださいということです
sample確認ください

[mandelin]

ご説明ありがとうございます。
<option value="">年</option>
部分は勝手に生産されるものだったりします。（月日部分も同様）
そこを選んでいてもエラーにならない方法は、やはりないのでしょうか。

[yambejp]

ありますが、選んでもいないものをあたかも選んだように勝手に解釈するのは
Aという商品を買ったつもりがBという商品が勝手に選ばれて送られてくるような
UIとしては悪手です。

エラーのときにはエラーを表示し、ユーザーに選ばせるのが肝要です

[mandelin]

なるほどでございます。
「未選択」というのも一つの選択肢にしたかったりしました。
（<option value=“1”>未定</option>というのを追加できたら良かったのですが
日付項目だとそういったこともできず。）
ユーザーには何かしら選んでもらえたと思います。
ありがとうございました。