Rendre obligatoire des champs dans un formulaire

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Rendre obligatoire des champs dans un formulaire

Message 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.
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

Voir le profil de l'utilisateur https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Rendre obligatoire des champs dans un formulaire

Message 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++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Rendre obligatoire des champs dans un formulaire

Message par demeter1 Jeu 23 Nov 2017 - 19:40

Bonjour Philippe,
cela fonctionne à la perfection.

Un grand merci pour cette aide ok
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

Voir le profil de l'utilisateur https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum