Discussion :

[arwin]

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);
}

[javatwister]

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.

[arwin]

Merci pour ta réponse

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