Bonjour,

Voici mon formulaire :

http://jsfiddle.net/Y4VU4/1/

J'aimerais que si l'utilisateur rentre un numéro de téléphone avec des lettres par exemple, un message d'erreur s'affiche.

A l'aide des expressions régulières j'ai réussi à faire ça et à insérer un message d'erreur, le problème c'est qu'il s'affiche sur une autre page alors que j'aimerais qu'il s'affiche sur la même page si possible à coté du champ "téléphone" et que ce champ de texte soit encadré en rouge, comme ici :

http://www.phpascal.com/programmatio...ormulaire.html

Sauf que je veux pas d'une alerte javascript

Pareil, si il ya plusieurs erreurs dans les champs à remplir, ces champs deviennent rouge avec le message d'erreur à coté.

Merci

Et un "merci" (comme pour ta demande précédente) ne serait pas de refus, même si les solutions qui te sont proposés ne sont parfois pas bonnes à 100%.

Comme dit, pour faire tes propres messages, vois ces messages comme des éléments à part entière (des <div> message </div> par exemple), existant par défaut à côté de chaque champ dans ton formulaire, mais invisible à l’œil. Tu les créées et tu n'as plus qu'à les rendre visible quand y'a une erreur, invisible sinon et le tour est joué.

Par ailleurs, je te conseille de tester le jquery. Le code est tellement plus simple, l'API est énorme, autant que les fonctionnalités sans avoir même besoin de coder, juste avec des petites fonctions toutes faites. Certes la page prend un peu de poids, mais ce n'est rien comparé au gain de temps et de poids fait par des fonctions très bien codées.
Enfin, à toi de voir ^^

Je vais essayer de faire plus simple alors xD

imaginons ton formulaire :

<form action="" onsubmit="return validate(this)">
            <p>
                <label for="firstname">First Name: </label>
                <input type="text" name="firstname" value="" id="firstname_obli" required  />
            </p>
            <p>
                <label for="lastname">Last Name: </label>
                <input type="text" name="lastname" value="" id="lastname_obli" required />
            </p>
            <p>
                <input type="submit" value="Submit">
            </p>
</form>

tu vas rajouter des div comme ça :

<form action="" onsubmit="return validate(this)">
            <p>
                <label for="firstname">First Name: </label>
                <input type="text" name="firstname" value="" id="firstname_obli" required  />
                <div class="message_ok">ALERT</div>
            </p>
            <p>
                <label for="lastname">Last Name: </label>
                <input type="text" name="lastname" value="" id="lastname_obli" required />
                <div class="message_ok">ALERT</div>
            </p>
            <p>
                <input type="submit" value="Submit">
            </p>
</form>

-------
Ensuite, dans ton css, tu définis 2 mises en forme :

.message_ok { ton_css_normal (display:none; par exemple) }
.message_erreur { ton_css_en_cas_d'erreur (display:block; pour le rendre de nouveau visible) }

-------
Enfin, en javascript, tu auras :

Si (erreur)
alors input-qui-contient-l'erreur => ajouter la class "message_erreur" à la div correspondante
sinon input-qui-ne-contient-pas-d'erreur => supprimer la class "message_erreur" de la div correspondante

Tu as dû manquer cette partie là :

Citation:

.message_ok { ton_css_normal (display:none; par exemple) }

display: none;
ou
width:0px; overflow:hidden;
permettent de cacher la div justement

Afficher/cacher un élément grâce au css est une astuce fondamentale dans l'affichage dynamique compatible tout navigateur.

Cet article pourra t'aider, je te conseille de te pencher dessus : http://fr.openclassrooms.com/informatique/cours/tout-sur-le-javascript/le-css-via-js

Ou bien ce topic-là :
http://fr.openclassrooms.com/forum/sujet/div-cachervisible-htmlcss-18915

Sémentiquement, ce formulaire est incorrect. Les input doivent se trouver dans des conteneurs de type balise <p>.
Ensuite, pour le centrer, un petit div autour de ton formulaire et margin:auto; ça passera facilement.
Quant aux <br/> On ne les utilise jamais pour faire du graphisme. On l'utilise pour un retour forcé au milieu d'une ligne éventuellement, mais pour distinguer 2 paragraphe, on utilisera quand même la balise <p> (margin:0; si on ne veut pas d'espace entre les deux paragraphes)

http://jsfiddle.net/BEpzq/7/

Voilà ton formulaire beaucoup plus propre.

Pas trop d'intérêt je trouve, hormis pour les lecteurs d'écran, mais sinon c'est juste pratique pour les boutons radio/case à cocher (vu qu'on peut cliquer sur le texte au lieu du bouton), mais bon.

Voilà, tout simplement :

http://jsfiddle.net/BEpzq/9/

Petite correction, je viens de comprendre l'utilité de ton css :
http://jsfiddle.net/BEpzq/19/

Et oublie pas que tu peux modifier le css de tes input ;p
http://jsfiddle.net/BEpzq/29/

Dans ce cas, il ne sera pas centré, ton tableau.
avec un :

Code:

margin : 3px auto 0;

tu aura ta marge de 3px au-dessus et il sera centré. A toi de voir tes besoins.