IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Validation du formulaire si input type=image


Sujet :

JavaScript

  1. #1
    Membre confirmé Avatar de torrgovin
    Profil pro
    Inscrit en
    Décembre 2009
    Messages
    105
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2009
    Messages : 105
    Par défaut Validation du formulaire si input type=image
    Bonjour à tous,
    Je rencontre un problème avec un script de vérification de champs ou select de formulaire.
    En effet lorsque je mets un input type="image" il me mets bien un alert quand je n'ai pas fait un choix dans le select, mais il valide quand même le formulaire, alors que si je mets un input type="button", il me mets tjr le box alert mais il ne valide pas le formulaire...

    Pourquoi ?

    J'aimerais garder le button de type image pour respecter le style de mon formulaire.

    Voici mon formulaire... (Quel bazar )
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    <script type="text/javascript">
    /* 
    Created by: Amit Wadhwa :: 
    */
     
    function checkThisForm(formname, submitbutton, errors) {
      if (errors == '') {
        eval(formname+'.'+submitbutton+'.disabled=true');
        eval('document.'+formname+'.submit()');
      } else {
        alert(errors);
      }
    }
     
    function checkText(formname, textboxname, displaytext) {
      var localerror = '';
      if(Trim(eval('document.'+formname+'.'+textboxname+'.value'))=='') {
        localerror =  '- '+displaytext+' sont requis.\n';
      } else localerror = '';
      return localerror;
    }
     
    function checkNum(formname, textboxname, displaytext) {
      var localerror = '';
      if(isNaN(eval('document.'+formname+'.'+textboxname+'.value'))) {
        localerror =  '- '+displaytext+' doit être des chiffres sans espaces.\n';
      } else localerror = '';
      return localerror;
    }
     
    function checkSpaces(formname, textboxname, displaytext) {
      var valid = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_'; // define valid characters
      var localerror = '';
      if(!isValid(Trim(eval('document.'+formname+'.'+textboxname+'.value')), valid)) {
        localerror =  '- '+displaytext+' Should Not Contain Spaces.\n';
      } else localerror = '';
      return localerror;
    }
     
    function checkSelect(formname, selectboxname, displaytext) {
      var localerror = '';
      if(eval('document.'+formname+'.'+selectboxname+'.selectedIndex')==0) {
        localerror =  '- '+displaytext+' est requis.\n';
      } else localerror = '';
      return localerror;
    }
     
    function getRadio(formname, radioname, displaytext) {
      for (var i=0; i < eval('document.'+formname+'.'+radioname+'.length'); i++) {
        if (eval('document.'+formname+'.'+radioname+'[i].checked')) {
          var rad_val = eval('document.'+formname+'.'+radioname+'[i].value');
          return rad_val;
        }
      }
    }
     
    function checkRadio(formname, radioname, displaytext) {
      var localerror = '';
      var rad_val    = '';
      for (var i=0; i < eval('document.'+formname+'.'+radioname+'.length'); i++) { //check every radio button by that name
        if (eval('document.'+formname+'.'+radioname+'[i].checked'))  { //if it is checked
          rad_val += '-';
          }	else rad_val += '';
          }
        if (rad_val=='') {
          localerror =  '- '+displaytext+' est requis.\n';
        }
      return localerror;
    }
     
    function autoComplete (field, select, property) {
    /*onKeyUp="autoComplete(this,this.form.selectboxname,'value',false)" - add this to textbox where you are typing*/
      var found = false;
      for (var i = 0; i < select.options.length; i++) {
        if (select.options[i][property].toUpperCase().indexOf(field.value.toUpperCase()) == 0) {
          found=true; break;
        }
      }
      if (found) {
        select.selectedIndex = i;
      } else {
        select.selectedIndex = -1;
      }
      if (field.createTextRange) {
        if (!found) {
          field.value=field.value.substring(0,field.value.length-1);
          return;
        }
        var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;";
        if (cursorKeys.indexOf(event.keyCode+";") == -1) {
          var r1 = field.createTextRange();
          var oldValue = r1.text;
          var newValue = found ? select.options[i][property] : oldValue;
          if (newValue != field.value) {
            field.value = newValue;
            var rNew = field.createTextRange();
            rNew.moveStart('character', oldValue.length) ;
            rNew.select();
          }
        }
      }
    }
     
    function Trim(s) {
      while ((s.substring(0,1) == ' ') || (s.substring(0,1) == '\n') || (s.substring(0,1) == '\r')) {
        s = s.substring(1,s.length);
      }
      while ((s.substring(s.length-1,s.length) == ' ') || (s.substring(s.length-1,s.length) == '\n') || (s.substring(s.length-1,s.length) == '\r')) {
        s = s.substring(0,s.length-1);
      }
      return s;
    }
     
    function isValid(string,allowed) {
    //  var valid = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; // define valid characters
        for (var i=0; i< string.length; i++) {
          if (allowed.indexOf(string.charAt(i)) == -1) return false;
        }
        return true;
    }
    </script>
    <script type="text/javascript">
    <!--
    /* 
    Created by: Amit Wadhwa :: 
    */
     
    function check(formname, submitbutton) {
      var errors = '';
      errors += checkSelect(formname, 'from', 'Select a departure please');
      checkThisForm(formname, submitbutton, errors);
    }
    //-->
    </script>
     
    <form name="formulaire_resa" method="POST" action="index2.php">
     
      <p>Entrez votre pays de résidence:
    		<select name="from" id="from" onChange="javascript:tester_paiement();">
    		<option value="" selected>- Choose a departure -</option>
    		<option value="Paris">Paris</option>
    		<option value="Disneyland">Disneyland</option>
    		<option value="L'Aéroport Charles de Gaulle">Charles de Gaulle Aeroport</option>
    		<option value="L'Aéroport Orly">Orly Aeroport</option>
    		<option value="L'Aéroport Beauvais">Beauvais Aeroport</option>
    		<option value="Dep_Adresse">Other</option>
    		</select>
     
        <input type="image" src="show_prices.png" alt="ok"  onClick="check('formulaire_resa', this.name);"></p>
    </form>
    Merci à vous

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    un bouton de type image equivaut à un bouton submit il faut donc passer par le onsubmit ...


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     
     
    <form name="formulaire_resa" method="POST" action="index2.php" onsubmit="return check('formulaire_resa');">
     
      <p>Entrez votre pays de résidence:
    		<select name="from" id="from" onChange="javascript:tester_paiement();">
    		<option value="" selected>- Choose a departure -</option>
    		<option value="Paris">Paris</option>
    		<option value="Disneyland">Disneyland</option>
    		<option value="L'Aéroport Charles de Gaulle">Charles de Gaulle Aeroport</option>
    		<option value="L'Aéroport Orly">Orly Aeroport</option>
    		<option value="L'Aéroport Beauvais">Beauvais Aeroport</option>
    		<option value="Dep_Adresse">Other</option>
    		</select>
     
        <input type="image" src="show_prices.png" alt="ok"  ></p>
    </form>
    ta fonction devant retourner true ou flase ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre confirmé Avatar de torrgovin
    Profil pro
    Inscrit en
    Décembre 2009
    Messages
    105
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2009
    Messages : 105
    Par défaut
    Merci pour votre aide.
    Même après avoir mis le onsubmit, le formulaire se valide toujours...

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    je pense que tu n'as pas vu le code ....

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    onsubmit="return check('formulaire_resa');">
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre confirmé Avatar de torrgovin
    Profil pro
    Inscrit en
    Décembre 2009
    Messages
    105
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2009
    Messages : 105
    Par défaut
    Désolé de t'enquiquiner.

    Je pense qu'au final sa doit donner ça ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     
    <form name="formulaire_resa" method="POST" action="index2.php" onsubmit="return check('formulaire_resa');">
     
      <p>Entrez votre pays de résidence:
    		<select name="from" id="from" onChange="javascript:tester_paiement();">
    		<option value="" selected>- Choose a departure -</option>
    		<option value="Paris">Paris</option>
    		<option value="Disneyland">Disneyland</option>
    		<option value="L'Aéroport Charles de Gaulle">Charles de Gaulle Aeroport</option>
    		<option value="L'Aéroport Orly">Orly Aeroport</option>
    		<option value="L'Aéroport Beauvais">Beauvais Aeroport</option>
    		<option value="Dep_Adresse">Other</option>
    		</select>
     
        <input type="image" src="show_prices.png" alt="ok"></p>
    </form>

  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    oui mais la fonction de verif retourne ture ou false ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  7. #7
    Membre confirmé Avatar de torrgovin
    Profil pro
    Inscrit en
    Décembre 2009
    Messages
    105
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2009
    Messages : 105
    Par défaut
    Je suis un boulet... -_-
    Comment savoir si elle me retourne true ou false ?

  8. #8
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    En regardant s'il y a un return dans ta fonction et quelle valeur est concernée par ce return
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  9. #9
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    ta fonction doit ressembler à ça
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function (param){
     
     
    if(...){
    return true;
    }
     
    else{
     
    return false;}
     
    }
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  10. #10
    Membre confirmé Avatar de torrgovin
    Profil pro
    Inscrit en
    Décembre 2009
    Messages
    105
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2009
    Messages : 105
    Par défaut
    Ah oui lol je viens de comprendre, si je selectionne rien dans le Select, il me retourne false avec le box alert.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    function checkSelect(formname, selectboxname, displaytext) {
      var localerror = '';
      if(eval('document.'+formname+'.'+selectboxname+'.selectedIndex')==0) {
        localerror =  '- '+displaytext+' est requis.\n';
      } else localerror = '';
      return localerror;
    }

  11. #11
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    if(eval('document.'+formname+'.'+selectboxname+'.selectedIndex')==0)
    Ahhhhhh !!! Mes yeux... quelle horreur !

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    if(document.forms[formname].elements[selectboxname].selectedIndex==0)
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  12. #12
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par torrgovin
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <form name="formulaire_resa" method="POST" action="index2.php" onsubmit="return check('formulaire_resa');">
    Citation Envoyé par torrgovin
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    function checkSelect(formname, selectboxname, displaytext)
    Il n'y aurait pas comme une confusion au niveau de la fonction appelée ?

    Peux-tu poster le code dans son état actuel ?
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  13. #13
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    l'inout image se comporte comme un submit ...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <script type="text/javascript">
    function verif(){
    if (document.getElementById('bar').value.length==0){
    alert('pas envoyé');
    return false;
    }
    return true
    }
    </script>
    </head>
     
    <body>
    <form action="javascript:alert('envoyé')" name="foo" onsubmit="return verif()" >
    <input type='text' value='' id="bar" />
    <input type="image" src="jjj.jpg" />
    </form>
    C.Q.F.D.
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  14. #14
    Membre confirmé Avatar de torrgovin
    Profil pro
    Inscrit en
    Décembre 2009
    Messages
    105
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2009
    Messages : 105
    Par défaut
    Merci !
    Bon je vais essayer de comprendre ce que t'as fait ^^

    A ++

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 5
    Dernier message: 15/12/2008, 17h15
  2. Afficher une image d'apres un formulaire utilisant input type="file"
    Par kilian67 dans le forum Général JavaScript
    Réponses: 33
    Dernier message: 17/08/2008, 22h12
  3. formulaire avec input type="file"
    Par Naksh-i dans le forum Servlets/JSP
    Réponses: 2
    Dernier message: 24/10/2006, 08h51
  4. Probleme avec les "input type="image" "
    Par khokho dans le forum Balisage (X)HTML et validation W3C
    Réponses: 9
    Dernier message: 26/03/2006, 17h12
  5. [XHTML] Input type="image"
    Par dorian53 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 07/10/2005, 22h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo