Validation de formulaire

Fermé
delavega470 Messages postés 298 Date d'inscription dimanche 9 février 2014 Statut Membre Dernière intervention 24 mars 2020 - 15 juil. 2017 à 16:17
delavega470 Messages postés 298 Date d'inscription dimanche 9 février 2014 Statut Membre Dernière intervention 24 mars 2020 - 21 juil. 2017 à 13:55
Bonjour,
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>  <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'
});
}
}
});

2 réponses

totodunet Messages postés 1377 Date d'inscription mercredi 18 mars 2009 Statut Membre Dernière intervention 5 mars 2020 199
21 juil. 2017 à 13:46
salut,

- pour le 1 il y a une petite coquille au niveau des guillemets dans le HTML :

<input type="text" id="nom "name="nom" class="form-control">

il y a un petit espace en trop dans l'attribut id

- pour le 2, voir la fonction match et l'utilisation des expressions régulières en JavaScript https://www.w3schools.com/jsref/jsref_match.asp

- pour le 3, il y a plus de travail. Il faut interroger ta BDD de manière asynchrone (avec Ajax) et regarder il retourne un numero client ou pas avant de lancer la requête insert into
https://api.jquery.com/jQuery.ajax/

PS: Ne pas stocker les mots de passes en brut dans JavaScript dont le code est accessible à tout utilisateur. Mais si c'est juste un exo c'est bon ;)
0
delavega470 Messages postés 298 Date d'inscription dimanche 9 février 2014 Statut Membre Dernière intervention 24 mars 2020 48
21 juil. 2017 à 13:55
ok merci !!
0