如何将必需设置为自定义选择选项？

Question

当用户不设置选择时，我想显示所需的消息。

这是我的密码：

​

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


for(option of options) {
    option.onclick = function() {
        mylist.classList.toggle('myhide');
        //iconSelect.classList.toggle('myRotate');
        selecText.innerHTML = this.textContent;
        valueTypeContra.value = this.getAttribute('data-value'); // get value select option
        
    }
}

<div class="selectFeld" title="Type de contrat">
    <input type="text" name="typeContrat" id="typecontrat" class="d-none" required>
    <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>

​

这是一个自定义的select选项，代码设置输入的值，不显示

Answer 1

由于您没有使用标准的表单元素，所以无法使用标准的required属性，因此没有相应的标准帮助特性。并且，将required添加到输入字段并不会显示内置帮助消息，因为您正在隐藏它。

您需要使用Javascript来编写自定义“必需”消息，以便与您的自定义表单输入机制一起运行。当然，有许多方法可以实现这一点，并向用户提供错误消息。您认为什么最适合您的用户？

乍一看。

从输入元素中删除无效的required属性。将输入更改为hidden类型，以避免使用css隐藏输入。并在说明中添加一个注释，让您的用户提前知道选择是否需要继续进行。

向表单中添加提交事件处理程序以捕获提交，并有机会验证表单。在处理程序中，检查(现在为hidden)输入字段中的空字符串，指示未使用自定义选择机制。如果输入值为空，则强调说明，并向用户提供错误消息。

例如：

​

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() {
    selecText.style.color = 'black'; // restore black color to instruction
    selecText.innerHTML = this.textContent;
    valueTypeContra.value = this.getAttribute('data-value');
  }
}

// GET FORM AND ADD SUBMIT EVENT HANDLER

document.querySelector('form').onsubmit = function () {

  // check if "typeContrat" is equal to an empty string
  if ( "" === this.elements['typeContrat'].value ) {
  
    // emphasize the instruction label
    selecText.style.color = 'red';
    // provide the user and alert message
    alert('Veuillez sélectionner type de contrat');
    // prevent the form from being submitted
    return false;
  }
  
  // if "typeContrat" is not an empty string submit the form
  else { return true; }
}

<form>
  <div class="selectFeld" title="Type de contrat">
    <input type="hidden" name="typeContrat" id="typecontrat" class="d-none" 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">
</form>

​

但是，有许多用户界面方法和编程机制可以实现这一点，因此首先确定哪些方法对用户最有效，支持您的应用程序目的、目标和外观，满足您的安全需求--并这样做。