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 :

validity pour valider un formulaire


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club Avatar de arwin
    Profil pro
    Inscrit en
    mars 2009
    Messages
    50
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2009
    Messages : 50
    Points : 35
    Points
    35
    Par défaut validity pour valider un formulaire
    Bonjour,
    j'essaye d'utiliser l'api validity pour valider un formulaire mais je n'y arrive pas. J'ai des soucis au niveau de la valueMissing où textContent = '....manquant' ne s'affiche pas, et des soucis au niveau de l'envoi du formulaire.

    Merci d'avance pour votre aide :

    Code html : 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
    <form novalidate id="myForm">
    	<div class="form-group">
    		<input type="text" class="form-control" name="prenom" id="prenom" required>
    		<span id="prenom_manquant"></span>
    	</div>
     
    	<div class="form-group">
    		<input type="text" class="form-control" name="adresse" id="adresse" required>
    		<span id="adresse_manquant"></span>
    	</div>
     
    	<div class="form-group">
    		<input type="email" class="form-control" name="email" id="email" required>
    		<span id="email_manquant" class="errorMail" aria-live="polite"></span>
    	</div>
    	<div class="form-group">
    		<button id="myButton" name="myButton" type="submit">Confirmer/button>
    </div>
    </form>

    JS :
    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
     
    /* ************* Envoyer le formulaire de confirmation ************* */
     
    const formValid = document.getElementById('myButton');
    formValid.addEventListener('click', valider);
     
    let isFormOk = true;
     
    // fonction valider() : permet d'envoyer le formulaire vers le serveur après vérification
    function valider(e) {
        e.preventDefault();
     
        let prenom = document.getElementById('prenom');
        let missPrenom = document.getElementById('prenom_manquant');
        let firstName = document.getElementById('prenom').value;
     
     
        let adresse = document.getElementById('adresse');
        let missAdresse = document.getElementById('adresse_manquant');
        let address = document.getElementById('adresse').value;
     
     
        let email = document.getElementById('email');
        let missEmail = document.getElementById('email_manquant');
        let mail = document.getElementById('email').value;
     
     
        let prenomValid = /^[a-zA-ZéèîïÉÈÎÏ][a-zéèêàçîï]+([-'\s][a-zA-ZéèîïÉÈÎÏ][a-zéèêàçîï]+)?$/;
        let adresseValid = /^[#.0-9a-zA-Z\s,-]+$/;
        let emailValid = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
     
        //Validation du prénom :
        if (prenom.validity.valueMissing) { //Si le champ est vide
            missPrenom.textContent = 'Prénom manquant';
            missPrenom.style.color = 'red';
            isFormOk = false;
        }
        if (prenomValid.test(prenom.value) == false) { //Si le format de données est incorrect
            missPrenom.textContent = 'Format incorrect';
            missPrenom.style.color = 'black';
            isFormOk = false;
        }
     
        //Validation de l'adresse :
        if (adresse.validity.valueMissing) {
            missAdresse.textContent = 'Adresse manquant';
            missAdresse.style.color = 'red';
            isFormOk = false;
        }
        if (adresseValid.test(prenom.value) == false) {
            missAdresse.textContent = 'Format incorrect';
            missAdresse.style.color = 'black';
            isFormOk = false;
        }
     
        //Validation de l'email :
        if (email.validity.valueMissing) {
            missEmail.textContent = 'Email manquant';
            missEmail.style.color = 'red';
            isFormOk = false;
        }
        if (emailValid.test(email.value) == false) {
            missEmail.textContent = 'Format incorrect';
            missEmail.style.color = 'black';
            isFormOk = false;
        }
     
        if (isFormOk) {
            let contact = {
                firstName,
                address,
                email
            };
    console.log(contact);
    }

  2. #2
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    3 581
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 3 581
    Points : 4 898
    Points
    4 898
    Par défaut
    Bonjour,

    Je ne connais pas ta fameuse "api" mais tu n'as sans doute pas choisi la meilleure solution (60 lignes de code pour contrôler 3 input!);

    Travaille de manière plus organisée:
    - les 3 données que tu demandes sont déconcertantes (prénom, adresse, mail)
    - pour ton bouton de soumission, tu confonds et tu mélanges un input de type "button" avec une balise button
    - les masques de saisie sont aberrants
    - tu fais appel à des propriétés ne figurant pas dans ta page (validity, valueMissing)
    - tu oublies de refermer ta fonction
    - tu définis un objet "contact" malformé au lieu d'un tableau
    - tu utilises l'événement click au lieu de submit pour valider le formulaire
    - etc.

  3. #3
    Nouveau membre du Club Avatar de arwin
    Profil pro
    Inscrit en
    mars 2009
    Messages
    50
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2009
    Messages : 50
    Points : 35
    Points
    35
    Par défaut
    Merci pour ta réponse

    pour l'API de validation :
    https://developer.mozilla.org/fr/doc...lidation_html5

Discussions similaires

  1. Réponses: 2
    Dernier message: 29/10/2008, 19h46
  2. Réponses: 11
    Dernier message: 08/07/2007, 18h32
  3. Réponses: 2
    Dernier message: 21/06/2007, 12h10
  4. Aide pour valider un formulaire
    Par utzal dans le forum Langage
    Réponses: 8
    Dernier message: 03/04/2007, 10h44
  5. [WebForms]Comment utiliser la touche entrée pour valider un formulaire ?
    Par yonialhadeff dans le forum Général Dotnet
    Réponses: 3
    Dernier message: 10/05/2006, 13h29

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