Validation de formulaire
delavega470
Messages postés
316
Statut
Membre
-
delavega470 Messages postés 316 Statut Membre -
delavega470 Messages postés 316 Statut Membre -
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
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'
});
}
}
});
A voir également:
- Validation de formulaire
- Whatsapp formulaire opposition - Guide
- Ethernet n'a pas de configuration ip valide - Guide
- Formulaire de réclamation facebook compte désactivé - Guide
- Formulaire de reclamation instagram - Guide
- Formulaire de contact le bon coin introuvable ✓ - Forum Réseaux sociaux
2 réponses
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 ;)
- 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 ;)