Formulaire

Résolu/Fermé

anthonyr-25 - 7 févr. 2022 à 18:43
anthonyr_25 - 8 févr. 2022 à 12:29

Bonjour,

J'aimerais sélectionner un input précis pour lui attribué une bordure si le champs est vide au click d'un button.

<section class="notsend">
            <form action="" method="get" class="form-group">
                <h2>Formulaire de contact</h2>
                
                <div class="form-group">
                    <h3>
                        <input class="nom" type="text" placeholder="Votre nom...">
                    </h3>
                </div>

                <div class="form-group">
                    <h3>
                        <input class="mail" type="email" name="" placeholder="Adresse mail...">
                    </h3>
                </div>

                <div class="form-group">
                    <h3>
                        <input class="msg" type="text" placeholder="Message...">
                    </h3>
                </div>

                <h2><button>Submit<img class="sendicon" src="./img/send.svg"></button></h2>
            </form>
        </section>

const btn = document.querySelector('button');

let nom = document.querySelector('.nom');
let mail = document.querySelector('.mail');
let msg = document.querySelector('.msg');
let ssend = document.querySelector('.send');
let notsend = document.querySelector('.notsend');


btn.addEventListener('click', send);

function send(){
    let nomval = nom.value;
    let mailval = mail.value;
    let msgval = msg.value;
    let putval = nomval, mailval, msgval;
    
    if (nomval == null) {
        nom.style.border = "5px solid red";
    } else if (mailval == null) {
        mail.style.border = "5px solid red";
    } else if (msgval == null) {
        msg.style.border = "5px solid red";
    } else if (putval == null) {
        (putval == null).style.border = "5px solid red";
    } else {
        notsend.style.display = "none";
        ssend.style.display = "block";
    }
}

Je comprend pas pk sa ne marche pas...

Configuration: Windows / Chrome 97.0.4692.99

A voir également:

Formulaire
Formulaire de réclamation facebook - Guide
Confirmer le nouvel envoi du formulaire err_cache_miss - Forum Google Chrome
Confirmation de l'envoi d'un formulaire html ✓ - Forum HTML
Problème d'envoi de formulaire ✓ - Forum PHP
Le formulaire rempli - Guide

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
7 févr. 2022 à 20:30

Bonjour,

Déjà.. si tu n'as qu'un seul élément .. privilégies les ID à la place des CLASS
Ensuite.. renseignes toi sur la portée des variables et principalement la différence entre CONST, LET et VAR

Donc, en mettant des ID sur tes input

   <input id="nom" type="text" placeholder="Votre nom...">

const  nom = document.querySelector('#nom');

et pour finir .... il faut bien que ton script JS se trouve APRES ton formulaire ( en général on le place avant le </body> de la page
Car si tu l'as mis dans le <head> .. et bien.. ton code html n'étant pas encore chargé par ton navigateur lorsque tu affiches la page... le JS ne sait pas où trouver les éléments que tu essaies de cibler..

Réponse 2 / 5

anthonyr_25
7 févr. 2022 à 22:45

Des Id okayy jvai faire sa
Mon script jle met tout le temps à la fin du body.. justement à cause de ses histoires de chargement

Réponse 3 / 5

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
8 févr. 2022 à 07:08

Une fois les modifications faites (y compris le remplacement des LET) montres nous ton code modifié. (Donnes nous le code COMPLET )

Pense aussi a regarder dans la console JavaScript de ton navigateur pour vérifier qu'il n'y a aucune erreur indiquée.

Réponse 4 / 5

anthonyr_25 Messages postés 165 Date d'inscription mercredi 5 janvier 2022 Statut Membre Dernière intervention 6 juillet 2022 6
8 févr. 2022 à 11:13

<body>
<!-- ------------------------------------------------------ nav -->
    <nav>
        <ul>
            <li><a href="#"><p>Home</p></a></li>
            <li><a href="#"><p>Entreprise</p></a></li>
            <li><a href="#"><p>Contact</p></a></li>
        </ul>
    </nav>

    <div class="red"></div>

    <main>
        <section class="infosplus">
            <h1>Information sur l'entreprise</h1>

            <!-- ----------------------------------------------------------------------------- infos -->
            <div class="infos">
                <h2>Adresse : </h2>

                <div class="para">
                    <p>28 Jackson Blvd Ste</p>
                    <p>1020 Chicago</p>
                    <p>IL 60604-2340</p>
                </div>

                <h4>Suivez-nous</h4>
            </div>
        </section>
    <!-- -------------------------------------------------------- formulaire -->
        <section class="notsend">
            <form action="" method="get" class="form-group">
                <h2>Formulaire de contact</h2>
                
                <div class="form-group">
                    <h3>
                        <input id="nom" type="text" placeholder="Votre nom...">
                    </h3>
                </div>

                <div class="form-group">
                    <h3>
                        <input id="mail" type="email" name="" placeholder="Adresse mail...">
                    </h3>
                </div>

                <div class="form-group">
                    <h3>
                        <input id="msg" type="text" placeholder="Message...">
                    </h3>
                </div>

                <h2><button>Submit<img class="sendicon" src="./img/send.svg"></button></h2>
            </form>
        </section>

        <section class="send">
            <form action="" method="get" class="send">
                <h2>Message envoyé !</h2>
            </form>
        </section>
    </main>
<!-- ------------------------------------------------------------------------------- icon -->
    <footer class="icon">
        <svg class="gmail" width="88" height="82" viewBox="0 0 88 82" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M79.2 71.75H70.4V26.9062L44 46.125L17.6 26.9062V71.75H8.8V10.25H14.08L44 32.0312L73.92 10.25H79.2V71.75ZM79.2 0H8.8C3.916 0 0 4.56125 0 10.25V71.75C0 74.4685 0.92714 77.0756 2.57746 78.9978C4.22778 80.9201 6.46609 82 8.8 82H79.2C81.5339 82 83.7722 80.9201 85.4225 78.9978C87.0729 77.0756 88 74.4685 88 71.75V10.25C88 7.53153 87.0729 4.9244 85.4225 3.00216C83.7722 1.07991 81.5339 0 79.2 0V0Z" fill="#FF5050"/>
        </svg>

        <svg class="insta" width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M41.9725 55.6676C49.574 55.6676 55.7362 49.5054 55.7362 41.9039C55.7362 34.3024 49.574 28.1401 41.9725 28.1401C34.371 28.1401 28.2087 34.3024 28.2087 41.9039C28.2087 49.5054 34.371 55.6676 41.9725 55.6676Z" fill="#FF5050"/>
            <path d="M83.0071 25.0648C82.9608 21.5934 82.311 18.1566 81.0867 14.9081C80.0249 12.1679 78.4033 9.67941 76.3254 7.60148C74.2474 5.52354 71.7589 3.9019 69.0187 2.84017C65.812 1.63639 62.4241 0.985483 58.9996 0.91517C54.5904 0.718086 53.1925 0.663086 42 0.663086C30.8075 0.663086 29.3729 0.663086 24.9958 0.91517C21.5728 0.986 18.1866 1.6369 14.9812 2.84017C12.2407 3.90116 9.75175 5.52254 7.67372 7.60057C5.59569 9.6786 3.97431 12.1675 2.91332 14.9081C1.70713 18.1124 1.05763 21.4994 0.992903 24.9227C0.79582 29.3364 0.736237 30.7343 0.736237 41.9268C0.736237 53.1193 0.736237 54.5493 0.992903 58.931C1.06165 62.3593 1.7079 65.7418 2.91332 68.9547C3.97609 71.6945 5.59868 74.1824 7.6774 76.2595C9.75613 78.3367 12.2453 79.9574 14.9858 81.0181C18.1824 82.2702 21.5692 82.9677 25.0004 83.0806C29.4142 83.2776 30.8121 83.3372 42.0046 83.3372C53.1971 83.3372 54.6317 83.3372 59.0087 83.0806C62.4332 83.0131 65.8212 82.3637 69.0279 81.1602C71.7673 80.0972 74.2552 78.4751 76.333 76.3973C78.4108 74.3196 80.0329 71.8317 81.0958 69.0922C82.3012 65.8839 82.9475 62.5014 83.0162 59.0685C83.2133 54.6593 83.2729 53.2614 83.2729 42.0643C83.2637 30.8718 83.2637 29.451 83.0071 25.0648V25.0648ZM41.9725 63.0927C30.2667 63.0927 20.7837 53.6097 20.7837 41.9039C20.7837 30.1981 30.2667 20.7152 41.9725 20.7152C47.5921 20.7152 52.9815 22.9475 56.9552 26.9212C60.9289 30.8949 63.1612 36.2843 63.1612 41.9039C63.1612 47.5235 60.9289 52.913 56.9552 56.8866C52.9815 60.8603 47.5921 63.0927 41.9725 63.0927V63.0927ZM64.0046 24.8722C63.3556 24.8728 62.7128 24.7455 62.1131 24.4974C61.5134 24.2493 60.9685 23.8854 60.5095 23.4265C60.0506 22.9675 59.6867 22.4226 59.4386 21.8229C59.1905 21.2232 59.0631 20.5804 59.0637 19.9314C59.0637 19.2829 59.1915 18.6407 59.4397 18.0415C59.6878 17.4423 60.0516 16.8979 60.5102 16.4393C60.9688 15.9808 61.5132 15.617 62.1124 15.3688C62.7116 15.1206 63.3537 14.9929 64.0023 14.9929C64.6508 14.9929 65.293 15.1206 65.8922 15.3688C66.4913 15.617 67.0358 15.9808 67.4944 16.4393C67.9529 16.8979 68.3167 17.4423 68.5649 18.0415C68.8131 18.6407 68.9408 19.2829 68.9408 19.9314C68.9408 22.6631 66.7317 24.8722 64.0046 24.8722Z" fill="#FF5050"/>
        </svg>

        <svg class="tweet" width="106" height="93" viewBox="0 0 106 93" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M106 11.0091C102.1 12.8763 97.9084 14.1382 93.5094 14.706C97.9999 11.8003 101.448 7.1992 103.071 1.71699C98.8026 4.45177 94.1322 6.3786 89.2619 7.41422C85.2948 2.85152 79.6433 0 73.388 0C61.3777 0 51.6402 10.512 51.6402 23.4773C51.6402 25.3177 51.8328 27.1093 52.2033 28.8281C34.1295 27.8487 18.1053 18.502 7.37901 4.29762C5.50744 7.76512 4.43502 11.7986 4.43502 16.1006C4.43502 24.2462 8.27463 31.432 14.1096 35.6424C10.6561 35.5257 7.27859 34.5187 4.25905 32.7055C4.2578 32.8039 4.2578 32.9022 4.2578 33.001C4.2578 44.3762 11.754 53.8655 21.7023 56.0223C18.4998 56.9626 15.1407 57.1002 11.8815 56.4247C14.6487 65.7521 22.6803 72.5396 32.1963 72.7296C24.7535 79.0263 15.3762 82.7799 5.18779 82.7799C3.43216 82.7799 1.70138 82.6686 0 82.4517C9.62405 89.1132 21.0551 93 33.3362 93C73.3375 93 95.2112 57.2248 95.2112 26.2001C95.2112 25.1818 95.1905 24.1693 95.1483 23.1626C99.4058 19.8399 103.081 15.7243 106 11.0091" fill="#FF5050"/>
        </svg>

        <svg class="facebook" width="92" height="93" viewBox="0 0 92 93" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M0 46.7596C0 69.8779 16.6098 89.1017 38.3333 93V59.4154H26.8333V46.5H38.3333V36.1654C38.3333 24.5404 45.7432 18.0846 56.2235 18.0846C59.5432 18.0846 63.1235 18.6 66.4432 19.1154V31H60.5667C54.9432 31 53.6667 33.8404 53.6667 37.4596V46.5H65.9333L63.8902 59.4154H53.6667V93C75.3902 89.1017 92 69.8818 92 46.7596C92 21.0413 71.3 0 46 0C20.7 0 0 21.0413 0 46.7596Z" fill="#FF5050"/>
        </svg>
    </footer>

    <script src="./js/script.js"></script>
</body>

body {
    background-color: black;
    width: 98vw;
    margin: 0;
}
main {
    display: flex;
    margin-left: 10vh;
    margin: 0;
}
.red {
    position: absolute;
    z-index: -1;
    background-color: #FF5050;
    margin-top: 25%;
    width: 100%;
    height: 30vh;
}
nav{
    position: fixed;
    top: 0;
    width: 100%;
    height: 10vh;
}
nav ul {
    display: flex;
    justify-content: space-around;
}
nav ul li {
    list-style: none;
    color: whitesmoke;
    font-size: 30px;
}
ul li a {
    text-decoration: none;
    color: whitesmoke;
    width: 100%;
    height: 100%;
}
h1{
    font-size: 30px;
    color: whitesmoke;
}
h2 {
    font-size: 30px;
}
.notsend {
    display: block;
    width: 50%;
    height: 50%;
    margin: 0;
}
.notsend h2 button {
    background-color: black;
    color: whitesmoke;
    font-size: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 5px solid #85ff3900;
}
.notsend h2 button:hover {
    border: 5px solid #84FF39;
    color: #84FF39;
}
.notsend h2 button:active {
    background-color: whitesmoke;
    border: 5px solid #84FF39;
    color: #84FF39;
}
.notsend h2 button:hover .sendicon svg path {
    fill: #84FF39;
}
.notsend h2 button img {
    width: 9vh;
    height: 9vh;
}
.form-group {
    margin: 0;
}
.form-group h3 input {
    width: 40%;
}
#nom {
    border: 5px solid rgba(255, 255, 255, 0);
}
#mail {
    border: 5px solid rgba(255, 255, 255, 0);
}
#msg {
    border: 5px solid rgba(255, 255, 255, 0);
    height: 10vh;
}
.send {
    display: none;
}
.infos {
    color: whitesmoke;
}
footer {
    width: 100%;
    background-color: black;
    height: 10vh;
    position: fixed;
    bottom: 0;
    margin-bottom: 5vh;
}
.icon svg path {
    fill: #FF5050;
}

const btn = document.querySelector('button');

const nom = document.querySelector('#nom');
const mail = document.querySelector('#mail');
const msg = document.querySelector('#msg');
const ssend = document.querySelector('.send');
const notsend = document.querySelector('.notsend');


btn.addEventListener('click', send);

function send(){
    let nomval = nom.value;
    let mailval = mail.value;
    let msgval = msg.value;
    /* let putval = nomval, mailval, msgval; */
    
    if (nomval == null) {
        nom.style.border = "5px solid red";
    } else if (mailval == null) {
        mail.style.border = "5px solid red";
    } else if (msgval == null) {
        msg.style.border = "5px solid red";
    /* } else if (putval == null) {
        (putval == null).style.border = "5px solid red"; */
    } else {
        notsend.style.display = "none";
        ssend.style.display = "block";
    }
}

/* if(window.innerWidth>680) { */

voila tout est la !

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
8 févr. 2022 à 11:56

Tu as oublié de remplacer des ID

  <section class="send">
            <form action="" method="get" class="send">

Vu que tu as deux items avec une class "send", ton js ne sait pas lequel choisir sur la ligne de code

const ssend = document.querySelector('.send');

Si tu veux cibler UN élément en particuler .. il faut utiliser un ID
Si tu veux cibler plusieurs éléments, ce n'est pas

document.querySelector

mais

document.querySelectorAll

qu'il faut utiliser puis BOUCLER dessus ( car ça te retourne un array )

Et pour finir .. qu'en est-il des messages dans la console du navigateur ?

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

anthonyr_25
Modifié le 8 févr. 2022 à 12:29

ha effectivement merci j'avais pas vue les deux class send !
et pour la console rien du tout pas d'erreur pas de msg

Discussions similaires

Je n'arrive plus à récuperer mon compte Outlook

Compte HOTMAIL bloqué . Que faire ?

Contacter le "bon coin"

formulaire de remboursement chez Free

compte hotmail bloqué

Discussions similaires

Newsletters