[Résolu] Validation syntaxe e-mail dans formulaire

Bonjour,

Après avoir galéré durant deux semaines pour comprendre l'usage d'un formulaire en php (sans succès), j'ai découvert que mon hébergeur proposait un code prémâché que j'ai enfin pu adapter à mon site.

J'ai ajouté des "required" à mes "input" et "texarea" obligatoire et tout fonctionne à merveille. Cependant si l'adresse e-mail n'est pas valide (chaine de caractère@chaine de caractère.extension) le formulaire est malgré tout envoyé.
Malgré mes innombrables recherches, lectures et tests je ne parviens pas à trouver le moyen de bloquer l'envoie si l'adresse est invalide (JS principalement). Je n'y connais rien en JS et ne parvient pas à adapter le code à mon formulaire. Profondément déçu ! Pfff
J'avoue que j'en ai marre de tourner en rond.

J'ai par ailleurs ajouter un second "input" pour s'assurer que l'usager à bien taper son adresse. Aussi des "placeholder".

Merci pour votre aide.

Questions

1 - Comment inclure un code de vérification de l'adresse (voir premier code ci-dessous) ?
2 - Comment y ajouter une vérification comparative (second input "retapez votre adresse") ?
3 - Comment cibler en css un "placeholder" pour en changer la couleur ?

1 - code que j'aimerais adapter à mon formulaire

function bonmail(mailteste)
{
	var reg = new RegExp('^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$', 'i');
	return(reg.test(mailteste));
}

2 - Le code de mon formulaire

    <form method="post" action="http://www.ecole-de-samba-de-bruxelles.be/cgi-bin/FormMail.pl" accept-charset="ISO-8859-1" onSubmit="var originalCharset = document.charset; document.charset = 'ISO-8859-1'; 
window.onbeforeunload = function () {document.charset=originalCharset;};">

        <label for="nom">Nom*</label>
        <input id="nom" name="Nom" placeholder="Entrez votre nom" required="required" />
    
        <label for="prenom">Prénom*</label>
        <input id="prenom" name="Prenom" placeholder="Entrez votre prénom" required="required" />
    
        <label for="email">E-mail*</label>
        <input id="email" name="Email" placeholder="Entrez votre adresse e-mail" required="required" />
        
        <label for="email">E-mail*</label>
        <input id="email" name="Email" placeholder="Enore une fois votre adresse e-mail" required="required" />
    
        <label for="media">Comment avez-vous connu notre site ?</label>
        <textarea id="media" cols="40" rows="10" name="Media"></textarea>
    
        <label for="message">Message*</label> 
        <textarea id="message" cols="40" rows="10" name="Message" placeholder="Tapez votre sympathique message ici" required="required"></textarea>
    
        <input type="submit" name="Envoyer" />
        <input type="reset" name="Effacer" />
        <p id="champs_obigatoires">Veuillez compléter tous les champs marqués de (*)</p>
        
    
    <div id="input"><!--id pour mettre un display: none. Inopérant pour validation-->
    <input type="submit" value="Envoyer" />
    <input type="hidden" name="recipient" value="test@xxx.be" />
    <input type="hidden" name="redirect" value="http://ecole-de-samba-de-bruxelles.be/merci_form.html" />
    <input type="hidden" name="required" value="Nom,Prenom,Email,Message" />
    </div>
    
</form>

Pour que ce soit valide il faut faire :

<input type="email" name="email" placeholder="example@email.com" />

Tu as oublié partout tes sauf pour submit (type="email/text/submit/checkbox/file/etc")

Salut Soldat8889

Merci pour ta réponse qui fonctionne mais seulement en partie.

J'ai mis des "type" partout dans les "input" comme demandé. L'adresse e-mail est bien mise en focus si invalide mais, ... jusqu'à l'@.
Si je tape au moins un caractère après l'@ le focus-erreur disparait et le mail peut être envoyé.

Donc oui ça fonctionne mais en partie, étrange.

Salut pchlj

Wahou ! Si le CSS ce met au JS, il va falloir que j'apprenne vite le PHP pour rattraper mon retard en Html.

Bon sérieusement: Mes recherches m'ont toujours amené au JS ou php. Je ne connaissais pas l'existence des pattern.
Merci pour ton aide précieuse, ça roule à merveille. Finalement je vais supprimer la confirmation de l'e-mail par un second champ qui a mon sens ne pourra se faire que par JS.
Le temps presse, je dois avancer et il n'est pas vital pas plus que le placeholder. Me reste à sécurisé un peu le formulaire.

Bonne soirée et un grand merci !

pchlj a écrit :
Salut,

html5 et le required propose des pattern

dans ton cas ceci vérifiera l'email

<input type="email" name="email" value="" placeholder="exemple email" required  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,8}$">

là c'est ma pattern mais t peux mettre la tienne

Hello,

C'est l'intention qui compte. Cependant, je vais mettre une réserve en rapport à la solution donnée :
- l'attribut pattern ne sert à rien pour un input type email
- l'attribut require fait son job en fonction du type de l'élément.
- la RegEx proposée est très moyenne : Je pourrais saisir dom%%%%.....----bla...@domain.com

Pour finir, la vérification d'un formulaire DOIT toujours être faite par le serveur. La vérification navigateur n'est qu'une question de confort !