J'essaie de définir la liste déroulante d'âge comme champ obligatoire. Définir également une valeur "-" vide, de sorte qu'une valeur doit être sélectionnée. Actuellement, les gens le laissent simplement comme "18" parce qu'il est déjà là.

Voici un exemple de champ obligatoire:

<div class="row form-group">
    <div class="col-md-12">
        <input  type="text" id="guestUsername" class="form-control fadeIn second" name="username" placeholder="Enter username" required>
    </div>
</div>

C'est le champ que je dois modifier et je ne sais pas comment:

<div class="row form-group fadeIn second">
    <div class="col-md-4">
        <select class="form-control" name="age" id="age">
             <?php for($age=18;$age<99;$age++):?>
             <option value="<?=$age?>"><?=$age?> years</option>
             <?php endfor;?>
        </select>
    </div>
2
psone 25 févr. 2021 à 05:39

2 réponses

Meilleure réponse

Ajoutez un <option> vide avant de générer le reste des valeurs de la liste déroulante. Ensuite, s'il est vide lorsque le formulaire est soumis, vous pouvez générer une erreur.

<select class="form-control" name="age" id="age" required>
     <option></option>
     <?php for($age=18;$age<99;$age++):?>
     <option value="<?=$age?>"><?=$age?> years</option>
     <?php endfor;?>
</select>

Échantillon

<form>
<select class="form-control" name="age" id="age" required>
    <option>AGE</option>
    <option value="18">18 years</option>
</select>
<input type="submit">
</form>
0
John Conde 25 févr. 2021 à 02:54

Essayez de le vérifier avant de soumettre le formulaire. Si l'utilisateur sélectionne la première option, afficher le message d'alerte, sinon soumettre le formulaire.

<form method="POST" id="myForm">
<select class="form-control" name="age" id="age" required>
<option>AGE</option>
<option value="18">18 Years</option>
</select>
</form>
<button onclick="Validate()">Submit</button>
<script>
function Validate(){
var a = document.getElementById('age').selectedIndex; 
var b = document.getElementById('myForm'); 
if(a=="0"){
alert("Please Choose A Valid Option");
}else{
b.submit();
}
}
</script>
0
Mahesh YL 25 févr. 2021 à 03:28