Code html:
Code CSS:
Je voudrais afficher un message quand aucun sexe n'est sélectionné, mais quand je clique sur Submit, le message s'affiche et tout de suite devient invisible. Je ne comprends pas pourquoi. S'il vous plait aidez-moi, je suis nouvelle en Javascript
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>
le titre de cette page
</title>
</head>
<body>
<form id="formulaire">
<span class="choice">Sexe:</span>
<label><input type="radio" value="homme" name="sexe" id="homme">Homme</label>
<label><input type="radio" value="femme" name="sexe" id="femme">Femme</label>
<span class='tooltip'>Vous devez sélectionner un sexe</span>
<br><br>
<span class="choice">Nom:</span>
<label><input type="text" class="section"></label>
<span class="tooltip">Votre nom ne doit pas faire moins de 2 caractères</span>
<br><br>
<span class="choice">Prénom:</span>
<label><input type="text"></label>
<span class="tooltip">Votre prénom ne doit pas faire moins de 2 caractères</span>
<br><br>
<span class="choice">Age:</span>
<label><input type="text"></label>
<span class="tooltip">Votre âge doit être compris entre 5 et 140 ans</span>
<br><br>
<span class="choice">Pseudo:</span>
<label><input type="text"></label>
<span class="tooltip">Votre pseudo doit au moins faire 4 caractères</span>
<br><br>
<span class="choice">Mot de passe:</span>
<label><input type="password"></label>
<span class="tooltip">Votre mot de passe doit au moins faire 6 caractères</span>
<br><br>
<span class="choice">Mot de passe (confirmation):</span>
<label><input type="password"></label>
<span class="tooltip">Le mot de passe de confirmation doit être identtique à celui d'origine</span>
<br><br>
<span class="choice">Pays:</span>
<select id="country">
<option>Choisissez votre pays de résidence</option>
<option>Maroc</option>
<option>Sénégal</option>
<option>Yemen</option>
</select>
<br><br>
<span class="choice"></span>
<label><input type="checkbox"></label>
<span class="confirm">Je désire recevoir la newsletter chaque mois:</span>
<br><br>
<span class="choice"></span>
<label><input type="submit" value="M'inscrire" onclick="valider()"> <input type="reset" value="Réinitialiser le formulaire"></label>
</form>
<script type="text/javascript">
var homme= document.getElementById('homme').checked;
var femme= document.getElementById('femme').checked;
var tooltip= document.getElementsByClassName('tooltip');
var input= document.getElementsByTagName('input');
function valider() {
if (homme==false && femme==false) {
tooltip[0].style.visibility='visible';
}
}
</script>
</body>
</html>Code CSS:
.choice{
display: inline-block;
margin-right: 15px;
padding: 3px 0px;
width: 200px;
text-align: right;
}
#formulaire{
margin-top: 50px;
}
.tooltip{
visibility: hidden;
}
input{
border-radius: 3px;
border-color: #CCC;
border-style: solid;
border-width: 1px;
}
Je voudrais afficher un message quand aucun sexe n'est sélectionné, mais quand je clique sur Submit, le message s'affiche et tout de suite devient invisible. Je ne comprends pas pourquoi. S'il vous plait aidez-moi, je suis nouvelle en Javascript
.