Partage
  • Partager sur Facebook
  • Partager sur Twitter

formulaire avec Jquery

    14 juillet 2017 à 11:02:17

    salut à tous je début avec Jquery en faisant ce script pour comprendre le fonctionnement j'avoue que j'ai juste fait un copié sur ce site 
    j'ai des soucis
    1-- quand je ne saisi rien tous les champs marqué * affiche leur border en rouge sauf pour le nom
    2-- j'aimerai faire un test sur le numero de phone avec un regex comme en php que cela affiche du rouge si
    ce n'est pas un numero de telephone
    3-- afficher un message si un client existe deja dans la bdd avant de faire une insertion avec insert into

    Merci de me repondre
    voici mon code

     <p><h4 style="color:red">vous n'avez pas rempli correctement les champs du formulaire !   </h4></p>   </div>
              <form method="post" name="form">  
                    <div class="row">
                      <div class="col-xs-12">
                        <div class="check-title">
                          <h4>Nouveau client</h4>
                        </div>
                      </div>
                      <div class="col-sm-6">
                        <label>Nom <em style="color:red"> * </em> :</label>
                        <div class="input-text">
                          <input type="text"  id="nom "name="nom" class="form-control">
                        
                        </div>
                      </div>
                      <div class="col-sm-6">
                        <label>Prénom <em style="color:red"> * </em> :</label>
                        <div class="input-text">
                          <input type="text" id="prenom" name="prenom" class="form-control">
                
                        </div>
                      </div>
                      <div class="col-xs-12">
                        <label>Addresse :</label>
                        <div class="input-text">
                          <input type="text" name="address" id="address" class="form-control">
                        </div>
                      </div>
                      <div class="col-xs-12">
                        <label>ville <em style="color:red"> * </em>:</label>
                        <div class="input-text">
                          <input type="text" name="ville" id="ville" class="form-control">
                        </div>
                      </div>
                      <div class="col-sm-6">
                        <label>Email <em style="color:red"> * </em>:</label>
                        <div class="input-text">
                          <input type="email" name="mail" id="mail" class="form-control">
                        </div>
                      </div>
                      <div class="col-sm-6">
                        <label>Contact 1  <em style="color:red"> * </em> :</label>
                        <div class="input-text">
                          <input type="text" name="phone1" id="phone1" class="form-control">
                        </div>
                      </div>
                       <div class="col-sm-6">
                        <label>Contact 2:</label>
                        <div class="input-text">
                          <input type="text" name="phone2" id="phone2" class="form-control">
                        </div>
                      </div>
                       <div class="col-sm-6">
                        <label>statu:</label>
                        <div class="input-text">
                          <select name="statu" lass="form-control" >
                             <option>M. </option>
                             <option>Mlle </option>
                             <option> Mme</option>
                          </select>
                        </div>
                        </div>
                        <div class="col-sm-6">
                         <label>Mot de passe <em style="color:red"> * </em> :</label>
                         <div class="input-text">
                          <input type="password" name="mdp" id="mdp" class="form-control">
                        </div>
                      </div> 
                      <div class="col-sm-6">
                        <label>Confirmation de mot de passe<em style="color:red"> * </em> :</label>
                        <div class="input-text">
                          <input type="password" name="confirmation" id="confirmation" class="form-control">
                        </div> 
                      </div>
                      <div class="col-xs-12">
                        <div class="billing-checkbox">
                        <label class="inline" for="rememberme">
                          <input type="checkbox" value="forever" id="rememberme" name="rememberme">
                          s'inscrire à la newsletter ! </label></div>
                        <div class="submit-text">
                          <button class="button" type="submit"  id="envoi"><i class="fa fa-user"></i>&nbsp; <span>Enregistrer</span></button>
                        </div> 
                      </div> 
                    </div><input class="button" type="reset" size="10"id="rafraichir" value="rafraichir">
                  </form>
              
    $(document).ready(function() 
    {
    var
     $nom = $('#nom'),
    $prenom = $('#prenom'),
    $phone1 = $('#phone1'),
    $phone2 = $('#phone2'),
    $mdp = $('#mdp'),
    $confirmation = $('#confirmation'),
    $mail = $('#mail'),
    $ville = $('#ville')
    $envoi = $('#envoi'),
    $reset = $('#rafraichir'),
    $erreur = $('#erreur'),
    $champ = $('.form-control');
    $champ.keyup(function(){
    if($(this).val().length < 5){ // si la chaîne de caractères est inférieure à 5
    
    $(this).css({ // on rend le champ rouge
    borderColor : 'red',
    color : 'red'
    });
    }
    else{
    $(this).css({ // si tout est bon, on le rend vert
    borderColor : 'green',
    color : 'green'
    });
    }
    });
    
    
    $confirmation.keyup(function(){
    if($(this).val() != $mdp.val()){ // si la confirmation est différente du mot de passe
    
    $(this).css({ // on rend le champ rouge
    borderColor : 'red',
    color : 'red'
    });
    }
    else{
    $(this).css({ // si tout est bon, on le rend vert
    borderColor : 'green',
    color : 'green'
    });
    }
    });
    $envoi.click(function(e){
    e.preventDefault(); // on annule la fonction par défaut dubouton denvoi
    
    // puis on lance la fonction de vérification sur tous les
    champs :
    
    verifier($nom);
    verifier($prenom);
    verifier($phone1);
    verifier($ville);
    verifier($mdp);
    verifier($confirmation);
    verifier($mail);
    });
    $reset.click(function(){
    $champ.css({  // on remet le style des champs comme on avait défini dans le style CSS
    
    borderColor : '#ccc',
    color : '#555'
    });
    $erreur.css('display', 'none'); // on prend soin de cacher le message erreur
    
    });
    function verifier(champ){
    if(champ.val() == ""){ // si le champ est vide
    $erreur.css('display', 'block');
     // on affiche le messagederreur
    
    champ.css({ // on rend le champ rouge
    borderColor : 'red',
    color : 'red'
    });
    }
    }
    });
    




    • Partager sur Facebook
    • Partager sur Twitter
      14 juillet 2017 à 11:54:03

      Comment on déclare une variable en Javascript ? (moi je sais heiin, mais c'est surtout pour toi)
      • Partager sur Facebook
      • Partager sur Twitter
        16 juillet 2017 à 14:52:50

        Regarde bien ton code alors

        • Partager sur Facebook
        • Partager sur Twitter
          18 juillet 2017 à 14:12:18

          Les variables sont pour moi bien déclarées.
          • Partager sur Facebook
          • Partager sur Twitter
            21 juillet 2017 à 20:59:32

            Pourquoi tu met un "$" devant tes variables ?
            • Partager sur Facebook
            • Partager sur Twitter
              24 juillet 2017 à 10:09:56

              Le "$" devant le nom de la variable est une norme lorsqu'on crée un objet jQuery.
              • Partager sur Facebook
              • Partager sur Twitter

              formulaire avec Jquery

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
              • Editeur
              • Markdown