Javascript pour formulaire

Résolu/Fermé
momohuri Messages postés 235 Date d'inscription lundi 6 juillet 2009 Statut Membre Dernière intervention 9 février 2012 - 14 sept. 2009 à 09:47
momohuri Messages postés 235 Date d'inscription lundi 6 juillet 2009 Statut Membre Dernière intervention 9 février 2012 - 14 sept. 2009 à 11:57
Bonjour,
J'ai fait un formulaire et j'aimerais rendre des champ obligatoire, mais sans message d'alerte qui s'ouvre dans une nouvelle boite de dialogue,j'aimerais juste dfaire une phrase a cote du champ text ou radio ou checkbox avec un petit message. Et je n'y arrive pas...

merci

10 réponses

jjsteing Messages postés 1669 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
14 sept. 2009 à 09:55
Bonjour,

il faut utiliser la fonction innerHTML (en js) qui te permet d ajouter du code alors que la page est déjà chargée

ex:
document.getElementById('MonHtml').innerHTML += '<br>Ici mon code \n';

sinon, y a l ajax (plus compliqué...)


peros, j utilise aussi une autre fonction que tu peux t inspirer, elle me sert à vérifier, lors de la creation d un compte utilisateur, que le mot de passe entré est le meme que celui de la confirmation : cet exemple active ou desactive le bouton submit celon la verif du mot de passe.. à toi d adapter à tes besoins ;)

php:
$Html.='<td width=250>Mot de passe : </td><td width=300><input MAXLENGTH=20 size=30 id="password1" name="password1" type="text" onkeyup="VerifPassword()"></td><tr>';

$Html.='<td>Confirmer : </td><td><input size=30 id="password2" MAXLENGTH=20 name="password2" type="text" onkeyup="VerifPassword()"></td><tr>';


js :
function VerifPassword(){
if (document.getElementById('password1').value != document.getElementById('password2').value){
document.getElementById('BtnValid').disabled=true;
}else{
document.getElementById('BtnValid').disabled=false;
}
}
0
momohuri Messages postés 235 Date d'inscription lundi 6 juillet 2009 Statut Membre Dernière intervention 9 février 2012 8
14 sept. 2009 à 10:51
dsl double poste, connection de merde...
0
momohuri Messages postés 235 Date d'inscription lundi 6 juillet 2009 Statut Membre Dernière intervention 9 février 2012 8
14 sept. 2009 à 10:51
je me suis bien inspire de ton code mais en le simplifiant^^


le script:

<script>
function Verification(){
if (document.getElementById('nom').value=""){
document.getElementById('error').display=block;
}else{
document.getElementById('BtnValid').disabled=false;
}
}
</script>


la partie du formulaire:

<td>Civilité</td><td>
<select name="civilite">
<option value="Mr">Mr</option>
<option value="Melle">Melle</option>
<option value="Mme">Mme</option>
<div id="erreurecivilite" id="error" style="display:none">Le champ n'est pas remplie</div>

et l'activation de la fonction:

<td><input type="button" name="valider" onClick="verification;" /></td>


mais ca ne marche pas.... tu vois pourquoi?
(quand je clique sur le button rien ne ce passe)
0
jjsteing Messages postés 1669 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
14 sept. 2009 à 11:06
re :)

1)
if (document.getElementById('nom').value="")
il est ou id="Nom" dan ston html ??

2)
document.getElementById('error').display=block;
=>
document.getElementById('error').style="display:block";

3)
si document.getElementById('BtnValid').disabled=false;
=>
<input type="button" id="BtnValid" name="valider" onClick="verification;" />

4)
dans ton <div> tu as 2 id !!

==>

<script>
function Verification(){
if (document.getElementById('nom').value=""){
document.getElementById('error').style="display:block";
}else{
document.getElementById('BtnValid').disabled=false;
}
}
</script>


la partie du formulaire:

<td>Civilité</td><td>
<input type="text" name="nom">
<select name="civilite">
<option value="Mr">Mr</option>
<option value="Melle">Melle</option>
<option value="Mme">Mme</option>
</select>
<div class:"erreurecivilite" id="error" style="display:none">Le champ n'est pas remplie</div>

et l'activation de la fonction:

<td><input type="button" id="BtnValid" name="valider" onClick="verification;" /></td>

essaye avec ca ;)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
momohuri Messages postés 235 Date d'inscription lundi 6 juillet 2009 Statut Membre Dernière intervention 9 février 2012 8
14 sept. 2009 à 11:22
re re

<script>
<script>
function Verification(){
if (document.getElementById('nom').value=""){
document.getElementById('erreurnom').style="display:block";
}else{
document.getElementById('BtnValid').disabled=false;
}
}
</script>

(j'ai changer pour que ce oit vraiment le nom cette fois^^)


<td>Nom</td><td><input type="text" name="nom" /></td>
<div id="erreurenom" id="error" style="display:none">Le champ n'est pas remplie</div>
</tr><tr>


<td><input type="button" id="BtnValid" name="valider" onClick="verification();" /></td>


et la quand je vais dans la console d'erreure de firefox j'ai un: verification is not defined

merci
0
jjsteing Messages postés 1669 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
14 sept. 2009 à 11:24
tu as toujours 2 id dans ton div !!

id="erreurenom" et id="error"

onClick="Verification();"


gaffe au minuscule/majuscule ! ;)
0
jjsteing Messages postés 1669 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
14 sept. 2009 à 11:26
et il te manque un id="nom"

=>

<td>Nom</td><td><input type="text" id="nom" name="nom" /></td>
0
jjsteing Messages postés 1669 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
14 sept. 2009 à 11:35
mais a ta place, je ferais :

<script>
function Verification(){
if (document.getElementById('nom').value == ""){
document.getElementById('BtnValid').disabled=true;
}else{
document.getElementById('BtnValid').disabled=false;
}
}
</script>

<td>Nom</td><td><input type="text" id="nom" name="nom" onkeyup="Verification();" /></td>
</tr><tr>


<td><input type="submit" id="BtnValid" name="valider" value="Valider" disabled="true" /></td>
0
momohuri Messages postés 235 Date d'inscription lundi 6 juillet 2009 Statut Membre Dernière intervention 9 février 2012 8
14 sept. 2009 à 11:35
ra j'ai vue juste après je l'ai corrige (l'histoire d'id")

</tr><tr>
<td>Nom</td><td><input type="text" name="nom" /></td>
<div id="erreurenom" style="display:none">Le champ n'est pas remplie</div>
</tr><tr>
script inchange

<script>
<script>
function Verification(){
if (document.getElementById('nom').value=""){
document.getElementById('erreurnom').style="display:block";
}else{
document.getElementById('BtnValid').disabled=false;
}
}
</script>

et maj verifie, toujours le meme....
<td><input type="button" id="BtnValid" name="valider" onClick="Verification();" /></td>
0
momohuri Messages postés 235 Date d'inscription lundi 6 juillet 2009 Statut Membre Dernière intervention 9 février 2012 8
14 sept. 2009 à 11:57
<script>

function Verification(){

if (document.getElementById('nom').value==""){

document.getElementById('erreurenom').style.display="block";
}

else{

document.getElementById('BtnValid').disabled=false;
}
}
</script>


</tr><tr>
<td>Nom</td><td><input type="text" name="nom" id="nom"/></td>
</tr><tr>
<td></td><td><div id="erreurenom" style="display:none">Le champ n'est pas remplie</div></td>
</tr><tr>


<td><input type="button" id="BtnValid" name="valider" onClick="Verification();" /></td>


ca fonctionne comme ca , merci pour ton aide
0