Rendre obligatoire des champs dans un formulaire

par demeter1 Dim 19 Nov 2017 - 16:56

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Opera
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://altitudetropicale.forums-actifs.com/index.forum

Description du problème

Bonjour à tous,
voici un formulaire de présentation qui fonctionne parfaitement mais que j'aimerai améliorer

1 rendre le remplissage de deux champs obligatoires :
- Ma zone de rusticité et,
- Moi et le jardinage

2 rajouter une infobulle spécifiant que le remplissage de ces champs est obligatoire.

le lien du formulaire
http://altitudetropicale.forums-actifs.com/h8-formulaire-de-presentation

le code complet

Code:: <br /><!doctype html> <html lang="fr"> <head> <meta charset="Windows-1252"> <title>Formulaire de présentation</title> <style>.exomarcs, .exomarcs2{ margin-right: -280PX;}td.texte { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 5px;}</style> </head> <body> <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0"><tbody> <tr> <th class="thHead" colspan="3" valign="middle" height="25">Formulaire de présentation </th> </tr> <tr> <td class="row2" colspan="2" valign="top"><span class="gensmall"><br /><br /><b>Merci d'avoir choisi le formulaire simplifié. Dés que votre présentations sera faite, vous pourrez accéder au reste du forum. Bonne lecture et au plaisir de discuter avec vous.</b></span></td> </tr> <br /><br /> <tr> <td> <meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" /><script type="text/javascript"> jQuery(function() { jQuery.get("http://altitudetropicale.forums-actifs.com/post?f=1&mode=newtopic", function(a) { jQuery("form").append((a.match(/<input type="hidden" name="auth\[\]" value="[0-9a-z]+" \/><input type="hidden" name="auth\[\]" value="[0-9a-z]+" \/>/) || [""])[0]) }) }); </script><script type="text/javascript"> function envoiMessage(form) { form.subject.value = "Présentation de : "+ form.Pseudo.value; var txt_message = "<table border='0' cellspacing='5' cellpadding='0'><tr>" + "<td><strong>Vous êtes :<\/strong><\/td>" + "<td class='pany' width='600' valign='top'> "+ form.poste.value +"<\/td><\/tr><\/table>" + "<table border='0' cellspacing='5' cellpadding='0'><tr><td valign='top' width='200'>" + "<table class='dany' width='200' border='0' cellspacing='0' cellpadding='0'><tr>" + "<td><strong>Pseudo :<\/strong><\/td><\/tr><\/table><\/td>" + "<td class='pany' width='600' valign='top'> "+ form.Pseudo.value +"<\/td><\/tr><\/table>" + "<table border='0' cellspacing='5' cellpadding='0'><tr><td valign='top' width='200'>" + "<table class='dany' width='200' border='0' cellspacing='0' cellpadding='0'><tr>" + "<td><strong>Ma zone de rusticité :<\/strong><\/td><\/tr><\/table><\/td>" + "<td class='pany' width='600' valign='top'> "+ form.Disponibilite.value +"<\/td><\/tr><\/table>" + "<table border='0' cellspacing='5' cellpadding='0'><tr><td valign='top' width='200'>" + "<table class='dany' width='200' border='0' cellspacing='0' cellpadding='0'><tr>" + "<td><strong>Ma localisation :<\/strong><\/td><\/tr><\/table><\/td>" + "<td class='pany' width='600' valign='top'> "+ form.occupe.value +"<\/td><\/tr><\/table>" + "<table border='0' cellspacing='5' cellpadding='0'><tr><td valign='top' width='200'>" + "<table class='dany' width='200' border='0' cellspacing='0' cellpadding='0'><tr>" + "<td><strong>J\'ai connu le forum par :<\/strong><\/td><\/tr><\/table><\/td>" + "<td class='pany' width='600' valign='top'> "+ form.forum.value +"<\/td><\/tr><\/table>" + "<table border='0' cellspacing='5' cellpadding='0'><tr><td valign='top' width='200'>" + "<table class='dany' width='200' border='0' cellspacing='0' cellpadding='0'><tr>" + "<td><strong>Mon blog :<\/strong><\/td><\/tr><\/table><\/td>" + "<td class='pany' width='600' valign='top'>"+ form.defauts.value +"<\/td><\/tr><\/table>" + "<table border='0' cellspacing='5' cellpadding='0'><tr><td valign='top' width='200'>" + "<table class='dany' width='200' border='0' cellspacing='0' cellpadding='0'><tr>" + "<td><strong>Moi et le jardinage :<\/strong><\/td><\/tr><\/table><\/td>" + "<td class='pany' width='600' valign='top'> "+ form.atouts.value +"<\/td><\/tr><\/table>" + "<table border='0' cellspacing='5' cellpadding='0'><tr><td valign='top' width='200'>" + "<table class='dany' width='200' border='0' cellspacing='0' cellpadding='0'><tr>" + "<td><strong>Autres :<\/strong><\/td><\/tr><\/table><\/td>" + "<td class='pany' width='600' valign='top'> "+ form.envie.value +"<\/td><\/tr><\/table>"; // Insère le texte construit dans le champ caché "message" du formulaire form.message.value = txt_message; } </script><title></title><style type="text/css"> div.c1 {padding-left:50px; padding-top:15px;} </style> <form action="/post" method="post" name="post" enctype="multipart/form-data" onsubmit="envoiMessage(this)"><input type="hidden" name="lt" value="0" /><input type="hidden" name="mode" value="newtopic" /><input type="hidden" name="topictype" value="0" checked="checked" /><input type="hidden" name="message" value="" /><input type="hidden" name="subject" value="" /><input type="hidden" name="f" value="9" /> <table class="fond" align="center" style="width: 100%;" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td align="center"> <table style="width: 500px;" border="0" cellspacing="3" cellpadding="0"> <tbody> <tr> <td align="left"> <table style="width: 500px;" border="0" cellspacing="3" cellpadding="0"> <tbody> <tr> <td class="texte" valign="top"> Vous êtes : </td> <td><select name="poste"><option value="[img]http://i73.servimg.com/u/f73/11/93/85/24/femme11.png[/img]" selected="selected">Une femme</option><option value="[img]http://i73.servimg.com/u/f73/11/93/85/24/homme12.png[/img]">Un homme</option></select> </td> </tr> <tr> <td class="texte" valign="top"> Mon pseudo : </td> <td valign="top"><input class="from-prez01" type="text" name="Pseudo" /> </td> </tr> <tr> <td class="texte" valign="top"> Ma zone de rusticité : </td> <td valign="top"><input class="from-prez01" type="text" name="Disponibilite" /> </td> </tr> <tr> <td class="texte" valign="top"> Ma localisation : </td> <td valign="top"><input class="from-prez01" type="text" name="occupe" /> </td> </tr> <tr> <td class="texte" valign="top"> J'ai connu le forum par : </td> <td valign="top"> <textarea class="exomarc" name="forum" rows="20" cols="60"> </textarea> </td> </tr> <tr> <td class="texte" valign="top"> Mon blog : </td> <td valign="top"> <textarea class="exomarc" name="defauts" rows="20" cols="60"> </textarea> </td> </tr> <tr> <td class="texte" valign="top"> Moi et le jardinage : </td> <td valign="top"> <textarea class="exomarc" name="atouts" rows="20" cols="60"> </textarea> </td> </tr> <tr> <td class="texte" valign="top"> Autres : </td> <td valign="top"> <textarea class="exomarc" name="envie" rows="20" cols="60"> </textarea> </td> </tr> <tr> <td valign="top" align="center"><input class="exomarcs" type="submit" name="post" value="Envoyer" /> </td> <td valign="top" align="center"><input class="exomarcs" type="reset" /> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </form> <td> </tr> <tr> <td class="row2" colspan="2" valign="top"><span class="gensmall"><br /><br /><center><b>Merci pour cette présentation</b></center></span></td> </tr> </tbody></table> </body> </html>

Un grand merci pour votre aide.

par Invité Mer 22 Nov 2017 - 12:01

Hello Stéphane,
on va ajouter l'attribut "required" qui va même s'occuper de mettre l'infobulle
sans toucher à quoi que ce soit ( le navigateur s'en occupera) et donner une bordure au conteneur si on clique sur "Envoyer" en ayant un de ces champs vide.

Recherches cette ligne:

Code:: <td valign="top"><input class="from-prez01" type="text" name="Disponibilite" />

Remplaces par:

Code:: <td valign="top"><input class="from-prez01" type="text" name="Disponibilite" required="required"/>

Recherches cette ligne:

Code:: <textarea class="exomarc" name="atouts" rows="20" cols="60"></textarea>

Remplaces par:
Attention que le textarea soit bien fermé surtout , comme ceci:

Code:: <textarea class="exomarc" name="atouts" rows="20" cols="60" required="required"></textarea>

a++

par demeter1 Jeu 23 Nov 2017 - 19:40

Bonjour Philippe,
cela fonctionne à la perfection.

Un grand merci pour cette aide

Rendre obligatoire des champs dans un formulaire