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