11521 sujets

JavaScript, DOM et API Web HTML5

Formulaire JavaScript

Bonjour,

J'aurai besoin d'aide sur un exercice concernant un formulaire de réservation que j'aimerai savoir coder en JavaScript , mais j'ai des difficultés car je débute je ne sais pas comment faire malgré mes recherches.

Fonctionnalités du bouton :

Vérifier avant envoi déclenche les opérations suivantes :
-Contrôle des champs obligatoires : si le champ n'est pas rempli, celui-ci prend une bordure rouge et un message s'affiche dans une boîte de dialogue.
-Contrôle la présence de "@" dans le champ e-mail. Si ce n'est pas le cas, un message s'affiche dans une boîte de dialogue.
-Passe le nom en majuscules.

Merci à ceux qui prendront le temps de me répondre.

HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercice form</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
    <div id="formBox">
        <h2>Formulaire de réservation :</h2>
            <p>(*= champs obligatoire)</p>
        <br>
        <form id="monForm" name="monForm" novalidate>
            <ul>
                <li><label for="nom">Nom :*</label>
                    <input class="texte" type="text" name="nom" id="nom" required autofocus placeholder="Votre nom ici"></li>
                <li><label for="prenom">Prénom :</label>
                    <input class="texte" type="text" name="prenom" id="prenom" placeholder="Votre prénom ici"></li>
                <li><label for="tel">Téléphone :</label>
                    <input class="texte" type="tel" name="tel" id="tel" placeholder="0123456789" maxlength="10" pattern="[0-9]{10}"></li>
                <li><label for="mail">Email :*</label>
                    <input class="texte" type="email" name="mail" id="mail" required placeholder="xxx@yyyy.zzz"></li>
                <li><label for="reserv">Votre réservation est pour :</label>
                <select class="texte" name="ld1" id="ld1">
                    <option value="dj">Demi-journée</option>
                    <option value="journee">Journée</option>
                    <option value="repas">Repas</option>
                </select>
                <input class="texte" type="text" name="quant1" id="quant1" placeholder="Qté">
                <input class="texte" type="text" name="st1" id="st1" placeholder="Sous-total HT" readonly></li>
                <li><label for="reserv"></label>
                <select class="texte" name="ld2" id="ld2">
                    <option value="dj">Demi-journée</option>
                    <option value="journee">Journée</option>
                    <option value="repas">Repas</option>
                </select>
                <input class="texte" type="text" name="quant2" id="quant2" placeholder="Qté">
                <input class="texte" type="text" name="st2" id="st2" placeholder="Sous-total HT" readonly></li>
                <li><label for="reserv"></label>
                <select class="texte" name="ld3" id="ld3">
                    <option value="dj">Demi-journée</option>
                    <option value="journee">Journée</option>
                    <option value="repas">Repas</option>
                </select>
                <input class="texte" type="text" name="quant3" id="quant3" placeholder="Qté">
                <input class="texte" type="text" name="st3" id="st3" placeholder="Sous-total HT" readonly></li>
                <li><label for="stHT">Sous-total HT:</label>
                    <input class="texte" type="text" name="stHT" id="stHT" placeholder="Sous-total HT" readonly>
                euros </li>
                <li><label for="ttc">Total TTC (TVA 20%):</label>
                    <input class="texte" type="text" name="ttc" id="ttc" placeholder="Total TTC" readonly>
                euros </li>
                <li><label for="cG">J'accepte les conditions générales*</label>
                    <input type="checkbox" name="cG" id="cG"></li>
                    <li><button type="button" class="texte" id="verif">Vérifier avant envoie</button>
                    <button type="button" class="texte" id="imp">Imprimer</button>
                    <button type="reset" class="texte" id="sup">Réinitialiser</button>
                    <button type="submit" class="texte" id="envoyer">Envoyer ma commande</button></li>
            </ul>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>


CSS :

#formBox {
    border: 1px solid grey;
    border-radius: 10px;
    width: 780px;
    padding-bottom: 10px;
}

p {
    margin: 0;
}

#formBox ul li {
    list-style-type: none;
    text-align: left;
    margin-bottom: 5px;
}

label {
    display: inline-block;
    width: 240px;
    font-weight: bold;
}

.texte {
    border-radius: 9px;
}

button {
    margin-top: 20px;
    position: relative;
    transform: translateX(140px);
    -webkit-transform: translateX(140px);
}

Modifié par ramouni13 (14 May 2020 - 18:45)
Oui j'ai essayé de faire quelques choses je pense que tout est à revoir je vous montre mon code :

function entoure(champ, erreur){
    if(true){
        champ.style.border = "1px solid #fba";
        alert( "Veuillez saisir les champs requis.");
    }else{
        champ.style.border = "1px solid #f00";
    }
}

function mail(a){
    var testMail = false;

    for(var i = 1; i<a.length; i++){
        if(a.charAt(i) == "@"){
            testMail = true;
        }
    }
    if(testMail == false){
        alert("Votre adresse mail est incorrecte.");
    }
    return testMail;
}

function majuscules(){
    var object = document.getElementById("nom");

    object.value = object.value.toUpperCase();
}

function verifForm(){
    var entoureOk = entoure(f.entoure);
    var mailOk = mail(f.email);
    var majusculesOk = majuscules(f.majuscules);

    if(entoureOk && mailOk && majusculesOk){
        return true;
    }else{
        return false;
    }
}

window.addEventListener("load", function(){
    document.getElementById("vérif").addEventListener("click", verifForm);
});


Encore une fois, je ne fais que commencer...

Merci d'avance.
Modifié par ramouni13 (15 May 2020 - 01:45)
Modérateur
bonsoir,

Il y a de très bonnes choses dans ton code et puis il y a des choses... comment dire, naaaan ça va pas....
points positifs:
1. <ul><li>
2. bouton type reset (enfin, je vois quelque chose de très pertinent ==> depuis que je code, je le vois très rarement)
3. creation de plusieurs fonctions

points négatifs
1. Respecter le jumelage entre label + input (attribut for)
2. Pas d'accent autoriser dans la valeur d'un attribut id
3. Ne pas afficher le bouton imprimer si le device ne le permet
4. le bouton d'un formulaire ne se click pas. Un formulaire, ça se soumet. Faire toujours très attention aux déclarations d'événement. Un événement, c'est cibler/écouter le comportement d'un élément html
5. object est un mot réservé... ne risque pas de fonctionner...

Là tu as un formulaire relativement complexe pour toi. Ne t'inquiète pas, on est tous passé par là. Je t'invite à faire (pour le moment) un formulaire avec seulement un champ et un submit. Ensuite tu n'auras plus qu'à reproduire la même logique pour valider.

ta fonction verifForm ne peut pas fonctionner : 

function verifForm(){
    var entoureOk = entoure(f.entoure);
    var mailOk = mail(f.email);
    var majusculesOk = majuscules(f.majuscules);

    if(entoureOk && mailOk && majusculesOk){
        return true;
    }else{
        return false;
    }
}


1. que vaut f ?
2. la fonction majuscule ne retourne rien

Donc, ce que je t'invite à faire dans un premier temps :
1. faire un formulaire avec un champs texte + un bouton submit
2. reprendre ce code : 

function majuscules(id_name){
    var field = document.getElementById(id_name);
    field.value = field.value.toUpperCase();
}

function verifForm(e){
    majuscules('nom');
    e.preventDefault();
}

window.addEventListener("load", function(){
    document.getElementById("monForm").addEventListener("submit", verifForm);
});


3. dans la fonction verifForm, j'aimerai que tu écrives le code qui permet de vérifier que le champs nom ait une valeur. Dans le cas contraire, tu affiches un message erreur.
Modifié par niuxe (15 May 2020 - 20:53)
Bonsoir,

Merci beaucoup d'avoir pris le temps de résoudre mon problème et pour tout vos conseil Smiley smile ,
je m'entraîne sur d'autres formulaire plus simple pour pouvoir refaire cette exercice plus facilement !
Modérateur
N'hésite pas à écrire une réponse sur ce sujet. J'essaierai de prendre le temps de regarder ça et en t'indiquant les axes d'améliorations. Smiley smile
Sujet clos
Aller à