JavaScript实现自定义下拉选择框的必填验证

<form>
  <div class="selectFeld" title="Type de contrat">
    <!-- 将 type 改为 hidden，并移除 required 属性 -->
    <input type="hidden" name="typeContrat" id="typecontrat" value="">
    <!-- 提示用户该字段为必填 -->
    <p>Type de contrat (required)</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a>”；</p>
  </div>
  <ul class="container-optionSelec list_contrat myhide">
    <li class="myOptions" data-value="redaction">
      <p>Redaction</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2371">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/694118c4215f8325.png" alt="MagicArena">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2371">MagicArena</a>
                            <p>字节跳动推出的视觉大模型对战平台</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="MagicArena">
                                <span>163</span>
                            </div>
                        </div>
                        <a href="/ai/2371" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="MagicArena">
                        </a>
                    </div>
                
    </li>
    <li class="myOptions" data-value="assistance">
      <p>Assistance</p>
    </li>
  </ul>
  <input type="submit" value="提交">
</form>

var options = document.querySelectorAll('.myOptions');
var selecText = document.querySelector('.selectFeld>p');
var mylist = document.querySelector('.list_contrat');
var valueTypeContra = document.querySelector('#typecontrat');

for (option of options) {
  option.onclick = function() {
    mylist.classList.toggle('myhide'); // 隐藏下拉列表
    selecText.style.color = 'black'; // 恢复文本颜色为黑色，清除错误提示
    selecText.innerHTML = this.textContent; // 更新显示文本
    valueTypeContra.value = this.getAttribute('data-value'); // 更新隐藏输入字段的值
  }
}

// 获取表单并添加提交事件处理器
document.querySelector('form').onsubmit = function() {
  // 检查 'typeContrat' 的值是否为空字符串
  if ("" === this.elements['typeContrat'].value) {
    // 如果为空，则强调说明文本，将其颜色变为红色
    selecText.style.color = 'red';
    // 向用户提供一个警告消息
    alert('Veuillez sélectionner type de contrat');
    // 阻止表单提交
    return false;
  }
  // 如果 'typeContrat' 的值不为空，则允许表单提交
  else {
    return true;
  }
}