Problèmes et solutions rencontrés lors de l'utilisation de la saisie requise de HTML5

Erreur lors du masquage de la saisie lors de la soumission du formulaire

Lorsque le formulaire est soumis, certaines balises d'entrée sont masquées et l'erreur An invalid form control with name='' is not focusable apparaîtra pendant le processus de vérification du formulaire.

Bien que le problème que j'ai rencontré soit que ma balise d'entrée n'a aucun attribut requis, mais avant que la balise ne soit masquée (j'ai utilisé la barre d'onglets pour changer), j'ai entré le mauvais format puis je l'ai masqué, à ce moment-là, c'était en fait faux. Il sera également vérifié par le formulaire, mais comme il est masqué, le navigateur signalera une erreur s'il ne parvient pas à obtenir le focus.

Définissez simplement la valeur de l'entrée sur vide avant de la masquer. Mon entrée n'utilise pas l'attribut requis.

Cette erreur se produira également si l’entrée contient les attributs display:none et requis.

Chrome souhaite se concentrer sur les contrôles nécessaires mais qui sont encore vides afin de pouvoir afficher le message Veuillez remplir ce champ. Toutefois, si le contrôle est masqué lorsque Chrome souhaite afficher le message, c'est-à-dire lorsque le formulaire est soumis, Chrome ne peut pas se concentrer sur le contrôle car il est masqué, le formulaire n'est donc pas soumis.

1. Lors du masquage, supprimez l'attribut requis

 selector.removeAttribute(obligatoire)

2. Si nécessaire n'est pas utilisé, cela peut être dû au fait que le type de bouton n'est pas défini. Définir <button type=button>

3. Le formulaire n'est pas vérifié, c'est-à-dire que l'attribut novalidate est ajouté. (Pas la solution finale ）<form novalidate></form>

4. Comme cela est dû à l'utilisation de display:none, la même visibilité:hide posera également des problèmes, alors ne l'utilisez pas. Vous pouvez définir l'opacité du style CSS : 0 ;

5. Désactivez ce contrôle de formulaire. désactivé En effet, si vous masquez un contrôle de formulaire, c'est généralement parce que vous ne vous souciez pas de sa valeur. Ainsi, cette paire de valeurs de nom de contrôle de formulaire ne sera pas envoyée lors de la soumission du formulaire.

 $(body).on(submit, .myForm, function(evt) {// Désactive les éléments que nous ne voulons pas valider.$([input:hidden, textarea:hidden, select:hidden]).attr(disabled , true);// Si la validation HTML5 est disponible, laissez-la s'exécuter. Sinon, empêchez default.if (this.el.checkValidity && !this.el.checkValidity()) { // Réactivez les éléments que nous avons précédemment désactivés $([input:hidden, textarea:hidden, select:hidden]).attr(disabled, false);}evt.preventDefault();// Réactivez les éléments qui nous avons précédemment désactivé.$([input:hidden, textarea:hidden, select:hidden]).attr(disabled, false);// Quels que soient les autres éléments de traitement de formulaire qui se trouvent ici.});

Ci-dessus sont les problèmes et les solutions rencontrés lors de l'utilisation de la saisie requise de h5 introduites par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. . Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !