11521 sujets

JavaScript, DOM et API Web HTML5

Erreurs dans un formulaire avec Javascript

Bonjour à tous,
Je suis débutante en Javascript, et j'ai un travail à rendre dessus malheureusement après des heures de recherche impossible de trouver les solutions. Je me porte donc à vous pour m'aidez.

Mon problème est le suivant : Le but est d'envoyer un message d'erreur lorsque l'utilisateur ne réponds pas à la question.

Voici mon code en HTML : 
<!DOCTYPE html>
<html lang="fr">
    <head> <!--Tête du formulaire-->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>QRU (Questionnaire à Réponse Unique)</title>
        <h1>Chèr(e) élève de première, voici un QRU (Questionnaire à Réponse Unique) sur l'Interaction entre l'homme et la machine sur le web :</h1>
        <h2>Bonne chance !!</h2>
    </head>
    <body><!--Corps du formulaire-->
   <!--<form action="reponse.php" method="POST">-->
        <link rel="stylesheet" href="index.css" />
                <div class="form-group">
                <table><!--Création d'un tableau-->
                    <tr>
                        <form>
                            <td>
                                <label for="nom">Votre nom</label>
                                <input type="text" class="form-control" id="nom" name="nom" required="required"/>
                            </td>
                            
<!---------------------------------------------------------------------------------------------------->                            
                            <td>
                                <label for="prenom">Votre prénom</label>
                                <input type="text" class="form-control" id="prenom" name="prenom" aria-describedby="prenom_aide" required="required">
                            </td>
                            
 <!---------------------------------------------------------------------------------------------------->

                            <td>
                                <label for="classe">Votre classe</label>
                                <select class="form-control" id="classe" name="classe" aria-describedby="classe_aide" required="required">
                                    <option>1ère G1</option>
                                    <option>1ère G2</option>
                                    <option>1ère G3</option>
                                    <option>1ère G4</option>
                                    <option>1ère G5</option>
                                    <option>1ère G6</option>
                                    <option>1ère G7</option>
                                    <option>1ère G8</option>
                                </select>
                            </td>
<!---------------------------------------------------------------------------------------------------->
                        </form>
                    </tr>
                </table> <!--Fin du tableau-->
            </div>
            <p>Questions :</p>
            <div >
                <label name="question1"><b> 1) Qui a créé Microsoft et en qu'elle année ?</b></label><br/>
                <input type="radio" id="reponse1" name="reponse1" value="reponse1" required="required">
                <label for="coding">Steve Wozniak, Ronald Wayne et Steve Jobs en 1976</label><br>
                <input type="radio" id="reponse2" name="reponse2" value="reponse2" required="required">
                <label for="music">Bill Gates et Paul Allen en 1975</label><br>
                <input type="radio" id="reponse3" name="reponse3" value="reponse3" required="required">     
                <label for="music"> Linus Torvalds en 1991</label><br>
                <input type="radio" id="reponse4" name="reponse4" value="reponse4"required="required">
                <label for="music"> Larry Page, Sergueï Brin en 1998</label>
            </div>
<!---------------------------------------------------------------------------------------------------->
            <div name='Question2' id="Question2">
                <p><b>2) Quel est le chemin absolu pour référencer le fichier "Fichier7.odp" ?</b></p><img src='images/url1.png'><br>
                <input type="radio" id="PC" name="spécialités" value="music" required="required">
                <label for="music">racine/dossier 2/dossier 4/fichier7.odp</label><br>
                <input type="radio" id="PC" name="spécialités" value="music" required="required">
                <label for="music">dossier 4/ fichier7.odp</label><br>
                <input type="radio" id="PC" name="spécialités" value="music" required="required">
                <label for="music">dossier 4/ fichier7.css</label><br>
                <input type="radio" id="PC" name="spécialités" value="music" required="required">
                <label for="music">racine/dossier 2/dossier 4/fichier7.css</label><br>
            </div>
<!---------------------------------------------------------------------------------------------------->
            <div>
                <p><b>3) Quelle balise de structure de texte permet la ligne horizontale ?</b></p>
                <input type="radio" id="svt" name="spécialités" value="art" required="required">
                <label for="art"><xmp><h1/></xmp></label><br>
                <input type="radio" id="PC" name="spécialités" value="music" required="required">
                <label for="music"><xmp><hr/></xmp></label><br>
                <input type="radio" id="PC" name="spécialités" value="music" required="required">
                <label for="music"><xmp><br/></xmp></label><br>
                <input type="radio" id="PC" name="spécialités" value="music" required="required">
                <label for="music"><xmp><ul></ul></xmp></label>
            </div>
            
<!---------------------------------------------------------------------------------------------------->
                <div>
                    <p><b>4) Traduire (1000 0100) en décimal (base 10):</b></p>
                   <input type="radio" id="svt" name="spécialités" value="art" required="required">
                <label for="art">132</label><br>
                <input type="radio" id="PC" name="spécialités" value="music" required="required">
                <label for="music">123</label><br>
            </div>
            
 <!---------------------------------------------------------------------------------------------------->

                <div>
                    <p><b>5) Quelle fonction de contrôle et manipulation de chaîne caractère permet de trouver la longueur ?</b></p>
                    <input type="radio" id="HG" name="spécialités" value="other" required="required">
                    <label for="other">insNaN()</label><br>
                    <input type="radio" id="PC" name="spécialités" value="music" required="required">
                    <label for="music">length</label><br>
                    <input type="radio" id="PC" name="spécialités" value="music" required="required">
                    <label for="music">indexOf</label><br>
                    <input type="radio" id="PC" name="spécialités" value="music" required="required">
                    <label for="music">toLowerCase</label>
            </div>
            
<!---------------------------------------------------------------------------------------------------->
                <div>
                    <button type="submit" class="btn btn-primary btn-expand" name="enregistrer">Enregistrer</button>
                    <button type="reset" class="btn btn-primary btn-expand">Annuler</button>

            </div> 
<!---------------------------------------------------------------------------------------------------->
        </form>
    </body>
</html>



Et pour mon code en Java je n'ai presque rien... j'ai tenté des choses mais sans résultat :

 <script lang="javascript">
        var start = document.getElementsByName('enregistrer');

            function valider()

	{

    if (document.getElementById('reponse1')+('reponse2')+('reponse3')+('reponse4)'.value == ""){
	alert ("Veuillez entrer votre prénom!");
	return false;
    }



Merci d'avance pour votre aide. Je sais que mon code est remplis d'erreur soyez indulgeant avec moi, je ne fais que débuter... Smiley ohwell
Merciii ! Smiley cligne
Modifié par June13 (20 Mar 2021 - 23:26)
Bonjour June13, D'abord plusieurs remarques sur ton code html: les balises h1 et h2 doivent être dans le body, d'après ce que je comprends tu ne devrais avoir qu'un seul form, un id doit être unique. Bon arrête là. Pour ton pb, je pense qu'il faut s'orienter vers le onsubmit (voir ici)https://www.w3schools.com/jsref/event_onsubmit.asp. Cette partie du script me semble KO 
if (document.getElementById('reponse1')+('reponse2')+('reponse3')+('reponse4)'.value == "")
Je pense qu'il faudrait plutôt quelque chose comme ceci 
if (document.getElementById('reponse1').value == ''
  && document.getElementById('reponse2').value == ''
  && document.getElementById('reponse3').value == ''
  && document.getElementById('reponse4').value == '')
Oui c'est seulement en javascript que doit-être les contrôles
Modifié par June13 (21 Mar 2021 - 14:18)
Sujet clos
Aller à