How to set required to a custom select option?

I want to show message required when user don't set a choice.

This is my code:

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>

It's a custom select option, the code set the value for the input displayed none