Créer le formulaire suivant :
NB:la mise en forme n’est pas demandée !, par contre il faut utiliser les balises sémantiques,
La page “Inscription.html” doit assurer certaines fonctionnalité dont :
1) Le clic sur le bouton “Inscription” fait appel à une fonction “verif( )” écrite en javascript et qui permet de vérifier le remplissage du formulaire d’inscription en respectant les conditions suivantes:
Le champ (Nom et prénom) doit être non vide et alphabétique et contient au moins un seul espace ( mais ni au debut ni à la fin) ,
Le champ (CIN) doit comporter 8 chiffres seulement.
Une des situations Sociales doit être sélectionné.
L’adresse (E-mail) doit obligatoirement comporter les caractères (“@ ” et “.”),
L’internaute doit choisir une fonction.
2) Si les conditions citées sont satisfaites, un message affiche “formulaire envoyé”.
Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inscription</title>
</head>
<body>
<h2>Inscription pour la premiere fois:</h2>
<form action="" >
<div><label for="nomPrenom">Nom et prenom</label><input type="text" name="nom" id="nomPrenom"></div>
<div><label for="cin">CIN</label><input type="number" name="cin" id="cin"></div>
<div><label for="situation">Situation sociale :</label>
<input type="radio" id="situation1" name="situation" value="celibataire">
<label for="situation1">Célibataire</label>
<input type="radio" id="situation2" name="situation" value="marie">
<label for="situation2">Marié(e)</label>
<input type="radio" id="situation3" name="situation" value="divorce">
<label for="situation3">Divorcé(e)</label>
</div>
<div>
<label for="email">E-mail :</label>
<input type="text" id="email" name="email">
</div>
<div>
<label for="fonction">Profession :</label>
<select id="fonction" name="fonction">
<option selected disabled>Choisir une profession</option>
<option>Ingénieur</option>
<option>Enseignant</option>
<option>Comptable</option>
<option>Médecin</option>
<option>Avocat</option>
</select>
</div>
<input type="submit" value="inscription" onclick="return verif()">
<!--
il y a une autre solution pour déclancher/appeler la fonction verif(),
on peut ajouter dans l'entete du formulaire:
<form action="" onsubmit="return verif()">
et enlever l'appel du bouton inscription:
<input type="submit" value="inscription">
-->
<input type="reset" value="Annuler">
</form>
</body>
<script src="inscription.js"></script>
</html>
Code JS
function verif() {
var champ = document.getElementById("nomPrenom");
var contenu = champ.value;
if (contenu.indexOf(" ") == -1 || contenu.indexOf(" ") == 0 || contenu.lastIndexOf(" ") == contenu.length - 1) {
alert("Le champ Nom et Prénom doit contenir au moins un espace (mais ni au début ni à la fin).");
return false;
}
contenu = contenu.trim();
if (contenu.length == 0) {
alert("Le champ Nom et Prénom ne doit pas être vide.");
return false;
}
for (var i = 0; i < contenu.length; i++) {
var c = contenu.charAt(i);
if (!(c >= 'a' && c <= 'z' || c >= 'A' && c <= 'Z' || c == ' ')) {
alert("Le champ Nom et Prénom ne doit contenir que des lettres et des espaces (au moins un mais ni au début ni à la fin).");
return false;
}
}
var champCIN = document.getElementById("cin");
var contenuCIN = champCIN.value;
if (contenuCIN.length != 8 || isNaN(contenuCIN)) {
alert("Le champ CIN doit comporter exactement 8 chiffres.");
return false;
}
var radios = document.getElementsByName("situation");
var situationSociale = radios[0].checked || radios[1].checked || radios[2].checked
if (!situationSociale) {
alert("Vous devez sélectionner au moins une situation sociale.");
return false;
}
var champEmail = document.getElementById("email");
var contenuEmail = champEmail.value;
if (contenuEmail.indexOf("@") == -1 || contenuEmail.indexOf(".") == -1) {
alert("Le champ e-mail doit comporter les caractères '@' et '.'.");
return false;
}
var champFonction = document.getElementById("fonction");
if (champFonction.selectedIndex == 0) {
alert("Vous devez sélectionner une profession.");
return false;
}
alert("formulaire envoyé");
return true;
}
