[Résolu] Popup avec un button ?

Bonsoir ! (Cette partie a finalement été réussie lol)

J'aimerais savoir s'il est possible de créer un alert de JS par un button d'un formulaire de contact ? C'est sûrement flou car j'ai sûrement pas les bons mots mdr en résultat ça donne ça

            <div class="rightfooter boxfooter">
                <h2>Demande de devis</h2>
                <div class="contentfooter">
                    <form action="">
                        <div class="emailfooter">
                            <div class="textfooter">Email *</div>
                            <input type="email" placeholder="gngngng." required>
                        </div>
                        <div class="msgfooter">
                            <div class="textfooter">Message *</div>
                            <textarea cols="25" rows="2" placeholder="gngngn" required></textarea>
                        </div>
                        <div class="btnfooter">
                            <button type="submit">Envoyer</button>
                        </div>

Voilà en photo car 'jai pas mis tout le code (je ne crois pas que c'était nécessaire)
C'est sûrement vague, vous devriez avoir compris le concept . Je ne connais pas beaucoup les fonctionnalités de JS c'est du début. J'ai essayé par

function popupBasique(page) {
    window.open(page);
  }

avec un href

javascript:popupBasique('popup.html')

Mais non, j'ai également essayé de donner une class btnfootersubmit à mon button et de faire

var btnfootersubmit = document.getElementsByClassName('btnfootersubmit');

btnfootersubmit.addEventListener('click',openModal);

function openModal(){
    overlay.style.display = 'block';
}

mais ça ne fonctionne pas.
Voilà voilà si quelqu'un peut trouver la patience de me diriger sur un tutoriel ou m'expliquer comment m'y prendre, merci à vous
Modifié par Efeelios (01 Mar 2021 - 03:18)

Salut !

Efeelios a écrit :
cependant il ignore les required des input, si quelqu'un peut m'éclairer comment je peux les vérifier avant d'afficher la pop up?

Il ignore les required ?
Quand je copie colle ton code il garde bien les required une fois que tu as fermé l'alert : https://jsfiddle.net/5tfx2vjw/
Ce n'est peut etre pas le comportement que tu attends ?

Efeelios a écrit :
et aussi j'en profite si quelqu'un peut me dire comment mettre des Apostrophe dans un champ de caractère

onblur="this.placeholder='test'"

j'ai essayé de les doubler mais apparement je suis encore à côté de la plaque

Il faut mettre des backslash normalement mais c'est que quand tu veux echapper des quotes du même genre que ceux utilisé pour le JS... Ici tu n'en a pas besoin normalement vu que " et ' cohabitent très bien : https://jsfiddle.net/maovqhLt/

Tu en aurais besoin si tu voulais afficher :

'test'

avec des quotes

onblur="this.placeholder='\'test\''"

pour ne pas que les guillemets autour de test coupe ton string.
https://jsfiddle.net/maovqhLt/1/
(et encore ca ne marche pas avec lez double, surement parceque c'est en inline dans le html)

Bonne journée
Modifié par _laurent (01 Mar 2021 - 05:50)

Merci Laurent d'avoir pris le temps de répondre,
Concernant les input je voulais dire que mon alert(); s'exécutait avant la validation du formulaire ce qui était assez embêtant (en gros même si l'email était vide j'avais le popup)
J'ai cherché de mon côté et j'ai essayé en mettant un id à mon <form id="devisun"></form> et un button type submit. Côté JS j'ai mis ça :

document.getElementById("devisun").addEventListener("submit", function(e) {
    e.preventDefault();
    alert('test');
})

Mais j'ai juste un message de re-validation d'un formulaire. J'ai un button type submit j'ai essayé de le passer en input type submit mais ça ne change rien. Mon code final ressemble à ça

                <form id="devisun">
                <h1>Nous contacter</h1>
                <input type="text" class="name" maxlength="20" placeholder="Votre Nom" onfocus="this.placeholder=''" onblur="this.placeholder='Votre Nom'" required>
                <input type="email" class="email" placeholder="Indiquez une adresse email valide" onfocus="this.placeholder=''" onblur="this.placeholder='Entrez une adresse email valide'" required>
                <textarea rows="1" placeholder="Soyez clair dans votre ..." class="message" onfocus="this.placeholder=''" onblur="this.placeholder='Soyez clair dans votre ...'" required></textarea>
                <button type="submit">Envoyer votre devis</button>
                </form>

et côté js c'est toujours la même.

(pour les apostrophes c'est niquel merci des explications)
Modifié par Efeelios (01 Mar 2021 - 17:14)

Sujet résolu réponse trouvée grâce au Discord de Graven et ses référents
Modifié par Efeelios (04 Mar 2021 - 04:55)