Complément aide javascript svp

Résolu
Utilisateur anonyme -  
Kopros Messages postés 595 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
voila je suis entrain de créer un formulaire mais je lutte pour afficher des alertes supplémentaire.

Code JavaScript : 
<script type="text/javascript"> 
<!--
function MM_validateForm() { //v4.0
if (document.getElementById){
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' doit contenir une adresse email valide.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- Votre '+nm+' est requis.\n'; }
} if (errors) alert('Les erreurs suivantes doivent etre corrigées:\n'+errors);
document.MM_returnValue = (errors == '');
} }
//-->
</script>


Civilité : * Monsieur Madame Mademoiselle
Nom : * i
Prénom : *
Adresse : *

Code postal : * ici alerte comme quoi il faut plus des chiffre et minimum x lettres
Ville : *
Pays : *

Téléphone : * ici alerte comme quoi il faut plus des chiffre et minimum x lettres
Adresse Email : *
Date de naissance : *

Login du compte : *
Mot de passe : * ici alerte comme quoi il faut plus 6 ou + chiffre et lettres

Adresse domaine : * ici alerte comme quoi il faut http:// et



donc mon souci c'est que si un personne mais des lettre a la place du numéro de tel j'ai aucune alerte pour lui dire qu'il faut des chiffre et pas des lettres. Pour le code postal aussi. et pour toute les case il faudrai que sa dise de mettre minimum X lettre

exemple:
Nom * : Y Alerte votre nom doit contenir plus de 4 lettres
Nom * : Y Alerte votre nom doit contenir plus de 2 lettres
Adresse * : vous avais oublier votre adresse
Pays * : vous devez spécifier un paye
etc...

Code de ma page si besoin 
<td width="128" align="left">
<b>Civilité : </b> </td>
<td width="348" align="left">
*<input type="radio" value="1" name="civilitee" id="civilitee" checked>&nbsp; Monsieur&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" value="2" id="civilitee" name="civilitee">&nbsp; Madame&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" value="2" id="civilitee" name="civilitee">&nbsp; Mademoiselle</td>
</tr>
<tr>
<td width="128" align="left">
<b>Nom : </b> </td>
<td width="348" align="left">
*<input type="text" id="nom" name="nom" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
<b>Prénom :</b></td>
<td width="348" align="left">
*<input type="text" name="prenom" id="prenom" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
<b>Adresse :</b></td>
<td width="348" align="left">
*<input type="text" name="adresse" id="adresse" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
&nbsp;</td>
<td width="348" align="left">
&nbsp;
<input type="text" name="adressebis" id="adressebis" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
<b>Code postal :</b></td>
<td width="348" align="left">
*<input type="text" name="code_postal" id="cp" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
<b>Ville : </b> </td>
<td width="348" align="left">
*<input type="text" name="ville" id="ville" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
<b>Pays :</b></td>
<td width="348" align="left">
*<input type="text" name="pays" id="pays" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
&nbsp;</td>
<td width="348" align="left">
&nbsp;</td>
</tr>
<tr>
<td width="128" align="left">
<b>Téléphone :</b></td>
<td width="348" align="left">
*<input type="text" name="telephone" id="tel" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
<b>Adresse Email :</b></td>
<td width="348" align="left">
*<input type="text" name="email" id="courriel" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
<b>Date de naissance :</b></td>
<td width="348" align="left">
*<select size="1" name="D1">
<option value="01">1</option>
<option value="02">2</option>
<td width="128" align="left">
<b>Civilité : </b> </td>
<td width="348" align="left">
*<input type="radio" value="1" name="civilitee" id="civilitee" checked>&nbsp; Monsieur&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" value="2" id="civilitee" name="civilitee">&nbsp; Madame&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" value="2" id="civilitee" name="civilitee">&nbsp; Mademoiselle</td>
</tr>
<tr>
<td width="128" align="left">
<b>Nom : </b> </td>
<td width="348" align="left">
*<input type="text" id="nom" name="nom" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
<b>Prénom :</b></td>
<td width="348" align="left">
*<input type="text" name="prenom" id="prenom" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
<b>Adresse :</b></td>
<td width="348" align="left">
*<input type="text" name="adresse" id="adresse" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
&nbsp;</td>
<td width="348" align="left">
&nbsp;
<input type="text" name="adressebis" id="adressebis" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
<b>Code postal :</b></td>
<td width="348" align="left">
*<input type="text" name="code_postal" id="cp" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
<b>Ville : </b> </td>
<td width="348" align="left">
*<input type="text" name="ville" id="ville" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
<b>Pays :</b></td>
<td width="348" align="left">
*<input type="text" name="pays" id="pays" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
&nbsp;</td>
<td width="348" align="left">
&nbsp;</td>
</tr>
<tr>
<td width="128" align="left">
<b>Téléphone :</b></td>
<td width="348" align="left">
*<input type="text" name="telephone" id="tel" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
<b>Adresse Email :</b></td>
<td width="348" align="left">
*<input type="text" name="email" id="courriel" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
<b>Date de naissance :</b></td>
<td width="348" align="left">
*<select size="1" name="D1">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select><select size="1" name="D2">
<option value="01">Janvier</option>
<option value="02">Février</option>
<option value="03">Mars</option>
<option value="04">Avril</option>
<option value="05">Mai</option>
<option value="06">Juin</option>
<option value="07">Juillet</option>
<option value="08">Aout</option>
<option value="09">Septembre</option>
<option value="10">Octobre</option>
<option value="11">Novembre</option>
<option value="12">Décembre</option>
</select><select size="1" name="D3">
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
</select></tr>
<tr>
<td width="128" align="left">
&nbsp;</td>
<td width="348" align="left">
&nbsp;</td>
</tr>
<tr>
<td width="128" align="left">
<b>
<font class="txt">Login&nbsp; du compte :</font></b></td>
<td width="348" align="left">
*<input type="text" name="pseudo" id="pseudo" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
<b>Mot de passe : </b> </td>
<td width="348" align="left">
*<input type="password" name="mot_de_passe" id="mdp" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
<b>Adresse domaine :</b></td>
<td width="348" align="left">
*<input type="text" name="domain" value="" size="23">.<select size="1" name="domain2">
<option value=".MonLien.net">.MonLien.net</option>
</select></td>
</tr>
</table>
<input type="hidden" name="offre" value="MonLien" />
<p align="center">
<a target="_blank" href="reglements.php">Réglement</a><br><br>
<input name="valider" type="submit" value="J'ai lu le réglement et je passe à l'étape suivante" /><br>
Attention, les champs marqués par <span class="Style5">*</span> sont à remplir 
obligatoirement
<br/><option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select><select size="1" name="D2">
<option value="01">Janvier</option>
<option value="02">Février</option>
<option value="03">Mars</option>
<option value="04">Avril</option>
<option value="05">Mai</option>
<option value="06">Juin</option>
<option value="07">Juillet</option>
<option value="08">Aout</option>
<option value="09">Septembre</option>
<option value="10">Octobre</option>
<option value="11">Novembre</option>
<option value="12">Décembre</option>
</select><select size="1" name="D3">
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
</select></tr>
<tr>
<td width="128" align="left">
&nbsp;</td>
<td width="348" align="left">
&nbsp;</td>
</tr>
<tr>
<td width="128" align="left">
<b>
<font class="txt">Login&nbsp; du compte :</font></b></td>
<td width="348" align="left">
*<input type="text" name="pseudo" id="pseudo" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
<b>Mot de passe : </b> </td>
<td width="348" align="left">
*<input type="password" name="mot_de_passe" id="mdp" value="" size="48"></td>
</tr>
<tr>
<td width="128" align="left">
<b>Adresse domaine :</b></td>
<td width="348" align="left">
*<input type="text" name="domain" value="" size="23">.<select size="1" name="domain2">
<option value=".MonLien.net">.MonLien.net</option>
</select></td>
</tr>
</table>
<input type="hidden" name="offre" value="MonLien" />
<p align="center">
<a target="_blank" href="reglements.php">Réglement</a><br><br>
<input name="valider" type="submit" value="J'ai lu le réglement et je passe à l'étape suivante" /><br>
Attention, les champs marqués par <span class="Style5">*</span> sont à remplir 
obligatoirement
<br/>


Voila en espèrent ne pas vous déranger avec mes souci de code mais niveau JavaScript et code c'est pas top j'apprends sur le tas :p


Cordialement Stéphane
A voir également:

4 réponses

Réponse 1 / 4
snip74
 
Encor merci, c'est parfait ;) et merci pour le lien je jéte un yeux dessuite ;)
Bon wenk-end ;)

Cordialement Stéphane
2
Kopros Messages postés 595 Date d'inscription   Statut Membre Dernière intervention   89
 
Il n'y a pas de quoi ;)
bon week end à toi !
0
Réponse 2 / 4
Kopros Messages postés 595 Date d'inscription   Statut Membre Dernière intervention   89
 
Voici une fonction qui permet de vérifier que la valeur d'un input est bien numérique :
function data_num(field){
var check = true;
var value = field.value; //get characters
//check that all characters are digits, ., -, or ""
for(var i=0;i < field.value.length; ++i)
{
var new_key = value.charAt(i); //cycle through characters
if(((new_key < "0") || (new_key > "9")) &&
!(new_key == ""))
{
check = false;
break;
}
}
//apply appropriate colour based on value
if(!check)
{
field.style.backgroundColor = "red";
}
else
{
field.style.backgroundColor = "white";
}
}

et dans l'input, tu mets :
onkeyup=data_num(this)

Ne mets pas trop d'alert, c'est pénible pour les utilisateurs.
Si tu tiens à en mettre une quand même, mets onblur à la place de onkeyup, sinon y'aura une alert à chaque fois qu'on appuie sur une touche.


Pour compter le nombre de caractères, c'est tout simple. Voici la fonction :

function verifNombre(field,min){
if(field.length<min){
alert('Il faut renseigner au moins '+min+' caractères');
}
}

et dans l'input :
onblur=verifNombre(this.value,4)

le 4, c'est le nombre de caractères minimum (comme ça t'utilises la fonction pour plusieurs input et le minimum peut être différent).


Edit : J'ai oublié de dire pour vérifier l'adresse web.

function validation(field){
var verif = /^http
if (verif.exec(field) == null){
return false;
}
else{
return true;
}
}

input :
onblur=validation(this.value)


Laisse /^http, si tu le remplaces par /^http:// ça veut dire que tu n'autorises pas les sites sécurisés (https)
2
Réponse 3 / 4
snip74
 
Bonjour Kopros,
Merci beaucoup de cette réponsse ;)

Je le teste des ques possible par contre c'est pour faire une commande sur le net voila pourquoi je veut mettre autent d'alerte pour évité que la personne qui paye ou commande qui oublie un truc et qui se sans perdu si remarque son erreur.

Par contre je comprend assé bien ton code et super bien expliquer y a tout de même un truc que je ne pige pas c'est de rempllacer onkeyup par onblur :/

Cordialement Stéphane
2
Réponse 4 / 4
Kopros Messages postés 595 Date d'inscription   Statut Membre Dernière intervention   89
 
En fait, onkeyup et onblur, ce sont des événements qui vont déclencher le script.
Pour onkeyup, l'événement c'est qu'on vient d'appuyer sur une touche du clavier.
Onblur, l'événement c'est que le champ en question perd le focus.

Si tu veux en savoir + :
https://forums.commentcamarche.net/forum/affich-37622096-javascript-les-evenements
1

Discussions similaires

Corriger fautes d'orthographe
Marie -
Raymond PENTIER -

8 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
en complément de mon précédent message
guidette -
_Agnes -

1 réponse
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
javascript:void(0);
nano -
JCVD -

18 réponses