setCustomValidity avec un rendu conditionnel
Bonjour,
Je rencontre quelques difficultés avec la validation personnalisé de formulaire
J'aimerais pouvoir utiliser la validation native des navigateurs en utilisant setCustomValidity(...) (actuellement j'utilise un watch et dans le callback je fais this.$refs....setCustomValidity(...) suivant si le champ est validé ou non
Bien-sur il m'est impossible de couvrir mes besoins avec les attributs standard tel que pattern/maxlength/ect...
Le problème c'est que j'ai aussi des rendus conditionnels (avec v-if) donc les éléments son re-rendus et avec je perds le custom validity...
Voici un exemple un peu bateau
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
| </template>
<b-form-input
ref="ref"
type="text"
v-model.trim="value"
required
v-if="show">
</b-form-input>
</template>
[...]
<script>
export default {
data() {
return {
value: "",
show: true,
}
},
watch: {
value: function (val) {
if(val === "toto") {
this.$refs.ref.setCustomValidity("Erreur, toto n'est pas valide")
}
else {
this.$refs.ref.setCustomValidity("")
}
},
show: function (val) {
if(val === "toto") {
this.$refs.ref.setCustomValidity("Erreur, toto n'est pas valide")
}
else {
this.$refs.ref.setCustomValidity("")
}
},
},
}
</script> |
mais quand show change (passe à false, puis repasse à true) le watch se déclenche bien mais l'élément n'est pas encore rendu, et donc je me retrouve forcement avec Uncaught TypeError: Cannot read property 'setCustomValidity' of undefined
Donc voilà y'a t'il un moyen de v-bind le custom validity à l'attribue directement ? Avec la variable qui sera bindé sera dans le computed.
ps: dans mon exemple le watch est redondant, et peu être que l'exemple n'est pas fonctionnel mais malheureusement je n'aurai la possibilité de tester mon exemple que demain.
