为JavaScript驱动的自定义选择下拉菜单实现“必填”验证

<div class="selectFeld" title="Type de contrat">
    <!-- 移除 'required' 属性，并建议使用 type="hidden" -->
    <input type="text" name="typeContrat" id="typecontrat" class="d-none">
    <p>Type de contrat</p>
    <img src="icon_form/Icon_contrat_deroulant.png" alt="" class="icon_select">
</div>
<ul class="container-optionSelec list_contrat myhide">
    <li class="myOptions" data-value="redaction"><p>Redaction</p></li>
    <li class="myOptions" data-value="assistance"><p>Assistance</p></li>
</ul>

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

for(let option of options) { // 使用 let 避免变量泄漏
    option.onclick = function() {
        mylist.classList.toggle('myhide'); // 切换列表显示/隐藏
        selecText.innerHTML = this.textContent; // 更新显示文本
        valueTypeContra.value = this.getAttribute('data-value'); // 更新隐藏输入字段的值
    }
}

<form>
  <div class="selectFeld" title="Type de contrat">
    <!-- 更改为 type="hidden" 并设置初始 value 为空 -->
    <input type="hidden" name="typeContrat" id="typecontrat" value="">
    <p>Type de contrat (required)</p> <!-- 提示用户此字段为必填 -->
  </div>
  <ul class="container-optionSelec list_contrat myhide">
    <li class="myOptions" data-value="redaction">
      <p>Redaction</p>
    </li>
    <li class="myOptions" data-value="assistance">
      <p>Assistance</p>
    </li>
  </ul>
  <input type="submit" value="Submit Form"> <!-- 添加提交按钮 -->
</form>

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

// 1. 更新选项点击处理程序，以清除错误样式
for (let option of options) {
  option.onclick = function() {
    mylist.classList.toggle('myhide'); // 切换列表显示/隐藏
    selecText.style.color = 'black'; // 恢复提示文本为黑色，清除错误提示
    selecText.innerHTML = this.textContent; // 更新显示文本
    valueTypeContra.value = this.getAttribute('data-value'); // 更新隐藏输入字段的值
  }
}

// 2. 为表单添加提交事件处理程序
document.querySelector('form').onsubmit = function () {
  // 检查隐藏输入字段 'typeContrat' 的值是否为空字符串
  if ( "" === this.elements['typeContrat'].value ) {
    // 如果为空，强调提示文本，例如将其颜色改为红色
    selecText.style.color = 'red';
    // 向用户提供一个警告消息
    alert('Veuillez sélectionner type de contrat'); // 请选择合同类型
    // 阻止表单的默认提交行为
    return false;
  }
  // 如果已做出选择（值不为空），则允许表单提交
  else {
    return true;
  }
}