Désactiver la validation des éléments de formulaire HTML5


419

Dans mes formulaires, j'aimerais utiliser les nouveaux types de formulaires HTML5, par exemple <input type="url" />( plus d'informations sur les types ici ).

Le problème est que Chrome veut être super utile et valider ces éléments pour moi, sauf qu'il est nul. S'il échoue à la validation intégrée, il n'y a aucun message ou indication autre que l'élément obtenant le focus. Je préremplit les éléments URL avec "http://", et donc ma propre validation personnalisée traite simplement ces valeurs comme des chaînes vides, mais Chrome rejette cela. Si je pouvais changer ses règles de validation, cela fonctionnerait aussi.

Je sais que je pourrais simplement revenir à l'utilisation, type="text"mais je veux les belles améliorations en utilisant ces nouveaux types d'offres (par exemple: il passe automatiquement à une disposition de clavier personnalisée sur les appareils mobiles):

Alors, existe-t-il un moyen de désactiver ou de personnaliser la validation automatique?


8
Le projet de spécification HTML 5.1 mentionne un inputmodeattribut qui, si je comprends bien ce que j'ai lu, peut être utilisé pour spécifier le type de clavier à offrir à l'utilisateur lorsqu'il interagit avec le champ, sans impliquer également de règles de validation. À un certain moment dans le futur, l'utilisation de l' inputmodeattribut au lieu de l' typeattribut sera probablement la bonne solution à ce problème - mais pas encore.
Mark Amery

@MarkAmery Bien qu'il ne soit pas trop difficile d'obtenir l'avenir maintenant:$('[inputmode]').each(function () { this.attr({type: this.attr('inputmode'), novalidate: true}) });
Marnen Laibow-Koser

1
@ MarnenLaibow-Koser Bien que ce que vous avez décrit fonctionne si tout ce que vous voulez faire est de désactiver la validation (comme spécifié par le demandeur de questions), il n'obtient pas tout à fait le même résultat que le inputmodeferait. En faisant les choses à votre façon, vous ne pouvez toujours pas (par exemple) lire des valeurs non numériques que l'utilisateur tape dans une zone de saisie de type number. Par exemple, essayez de taper quelque chose de non numérique dans la zone de texte de ce violon et de cliquer sur le bouton.
Mark Amery

@MarkAmery Intéressant. Est-ce parce que <input type='number'>n'accepte pas du tout les valeurs non numériques?
Marnen Laibow-Koser

@ MarnenLaibow-Koser Je suppose que oui. La réponse acceptée à cette question sur le problème comprend un lien vers une spécification qui, selon le répondeur, rend obligatoire ce comportement.
Mark Amery

Réponses:


752

Si vous souhaitez désactiver la validation côté client pour un formulaire en HTML5, ajoutez un attribut novalidate à l'élément de formulaire. Ex:

<form method="post" action="/foo" novalidate>...</form>

Voir https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate


83
novalidate="novalidate"et novalidate=""est également une syntaxe valide.
bassim

9
@bassim Syntaxe valide mais trop verbeuse - pourquoi taper plus que nécessaire?
user1569050

11
@ user1569050 Par exemple dans des frameworks comme CakePHP, il utilisera la novalidate="novalidate"méthode lorsque vous définissez le novalidate => truedans le $optionstableau du FormHelper::create(). Merci bassim pour l'info supplémentaire :)
Jelmer

12
@ rybo111 Il s'agit d'une validation côté client, ce qui est bon pour réduire le nombre de demandes au serveur. Ce n'est pas une excuse pour faciliter la validation côté serveur.
martti

11
@martti Je faisais référence au fait que si je teste une nouvelle validation PHP, je peux rapidement désactiver la validation JavaScript pour ce formulaire afin d'éviter d'avoir à remplir correctement le formulaire en entier. J'aurais dû écrire "plus facile à tester".
rybo111

31

J'ai lu la spécification et j'ai fait des tests dans Chrome, et si vous attrapez l'événement "invalide" et renvoyez false, cela semble permettre la soumission du formulaire.

J'utilise jquery, avec ce HTML.

// suppress "invalid" events on URL inputs
$('input[type="url"]').bind('invalid', function() {
  alert('invalid');
  return false;
});

document.forms[0].onsubmit = function () {
  alert('form submitted');
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="url" value="http://" />
  <button type="submit">Submit</button>
</form>

Je n'ai testé cela dans aucun autre navigateur.


Excellent - je vais l'essayer demain et je vous ferai savoir comment ça se passe. Merci.
nickf

Hou la la! J'avais vraiment du mal à chercher où était passé mon événement de soumission. Merci Monsieur!
Gipsy King

2
FireFox valide en cas de changement d'entrée. L'événement «invalide» n'est pas déclenché. Donc, pas de solution pour moi.
Niels Steenbeek

7
demain ne vient jamais :)
Lucky Soni

4
Ça ne marche pas. J'ai fait du code un extrait. Attraper l' invalidévénement et retourner faux ne permet pas au formulaire de se soumettre.
Dan Dascalescu

23

Je voulais juste ajouter que l'utilisation de l'attribut novalidate dans votre formulaire empêchera uniquement le navigateur d'envoyer le formulaire. Le navigateur évalue toujours les données et ajoute les pseudo-classes: valide et: invalide.

J'ai découvert cela parce que les pseudo-classes valides et invalides font partie de la feuille de style HTML5 passe-partout que j'utilisais. Je viens de supprimer les entrées du fichier CSS liées aux pseudo-classes. Si quelqu'un trouve une autre solution, faites-le moi savoir.


Comment s'appelaient les entrées?
tm_forthefuture

1
Haha - Je ne sais plus désolé. C'était il y a 3 ans maintenant. :(
BFTrick

1
Vous voulez dire <form action="" method="" class="" id="" novalidate>
:;

15

La meilleure solution consiste à utiliser une entrée de texte et à ajouter l'attribut inputmode = "url" pour fournir les fonctionnalités du clavier URL. La spécification HTML5 a été pensée à cet effet. Si vous gardez type = "url" vous obtenez la validation de la syntaxe qui n'est pas utile dans tous les cas (il est préférable de vérifier si elle retourne une erreur 404 au lieu de la syntaxe qui est assez permissive et n'est pas d'une grande aide).

Vous avez également la possibilité de remplacer le modèle par défaut avec l'attribut pattern = "https?: //.+" par exemple pour être plus permissif.

Mettre l'attribut novalidate dans le formulaire n'est pas la bonne réponse à la question posée car il supprime la validation de tous les champs du formulaire et vous souhaiterez peut-être conserver la validation des champs de messagerie par exemple.

L'utilisation de jQuery pour désactiver la validation est également une mauvaise solution car elle devrait absolument fonctionner sans JavaScript.

Dans mon cas, j'ai mis un élément select avec 2 options (http: // ou https: //) avant l'entrée URL car j'ai juste besoin de sites Web (et pas de ftp: // ou d'autres choses). De cette façon, j'évite de taper ce préfixe bizarre (le plus grand regret de Tim Berners-Lee et peut-être la principale source d'erreurs de syntaxe URL) et j'utilise une simple entrée de texte avec inputmode = "url" avec des espaces réservés (sans HTTP). J'utilise jQuery et le script côté serveur pour valider l'existence réelle du site Web (no 404) et pour supprimer le préfixe HTTP s'il est inséré (j'évite d'utiliser un modèle comme pattern = "^ ((? Http).) * $" pour éviter de mettre le préfixe car je pense qu'il vaut mieux être plus permissif)


13

Au lieu d'essayer de faire un tour final autour de la validation du navigateur, vous pouvez mettre le http://in en tant que texte d'espace réservé. C'est à partir de la page que vous avez liée:

Texte d'espace réservé

La première amélioration apportée par HTML5 aux formulaires Web est la possibilité de définir du texte d'espace réservé dans un champ de saisie . Le texte de l'espace réservé est affiché à l'intérieur du champ de saisie tant que le champ est vide et non focalisé. Dès que vous cliquez sur (ou sur l'onglet pour) le champ de saisie, le texte de l'espace réservé disparaît.

Vous avez probablement déjà vu du texte d'espace réservé. Par exemple, Mozilla Firefox 3.5 inclut désormais un texte d'espace réservé dans la barre d'emplacement qui indique "Rechercher les signets et l'historique":

entrez la description de l'image ici

Lorsque vous cliquez sur (ou sur l'onglet pour) la barre d'emplacement, le texte de l'espace réservé disparaît:

entrez la description de l'image ici

Ironiquement, Firefox 3.5 ne prend pas en charge l'ajout de texte d'espace réservé à vos propres formulaires Web. C'est la vie.

Support d'espace réservé

IE  FIREFOX SAFARI  CHROME  OPERA   IPHONE  ANDROID
·   3.7+    4.0+    4.0+    ·       ·       ·

Voici comment vous pouvez inclure du texte d'espace réservé dans vos propres formulaires Web:

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

Les navigateurs qui ne prennent pas en charge l' placeholderattribut l' ignoreront simplement. Pas de mal, pas de faute. Vérifiez si votre navigateur prend en charge le texte d'espace réservé .

Ce ne serait pas exactement la même chose car cela ne fournirait pas ce "point de départ" à l'utilisateur, mais il est au moins à mi-chemin.


5
+1 pour le pourboire, mais cela ne va malheureusement pas être une solution pour moi. Je ne veux toujours pas de validation, principalement parce que l'UX est si pauvre.
nickf

10

J'ai trouvé une solution pour Chrome avec CSS ce sélecteur suivant sans contourner le formulaire de vérification natif qui pourrait être très utile.

form input::-webkit-validation-bubble-message, 
form select::-webkit-validation-bubble-message,
form textarea::-webkit-validation-bubble-message {
    display:none;
} 

De cette façon, vous pouvez également personnaliser votre message ...

J'ai la solution sur cette page: http://trac.webkit.org/wiki/Styling%20Form%20Controls


1
Cela ne fonctionne pas dans la dernière version de chrome (29), je me demande si c'est à cause du clignotement
Blowsie

5

Utilisez simplement novalidate dans votre formulaire.

<form name="myForm" role="form" novalidate class="form-horizontal" ng-hide="formMain">

À votre santé!!!


1
qu'en est-il de la désactivation de la validation pour une seule balise d'entrée?
Tobias Kolb

0

Voici la fonction que j'utilise pour empêcher chrome et l'opéra d'afficher la boîte de dialogue d'entrée invalide même lorsque vous utilisez novalidate.

window.submittingForm = false;
$('input[novalidate]').bind('invalid', function(e) {
    if(!window.submittingForm){
        window.submittingForm = true;
        $(e.target.form).submit();
        setTimeout(function(){window.submittingForm = false;}, 100);
    }
    e.preventDefault();
    return false;
});

0

vous pouvez ajouter du javascript pour supprimer ces bulles de validation désagréables et ajouter vos propres validateurs.

document.addEventListener('invalid', (function(){
    return function(e) {
      //prevent the browser from showing default error bubble / hint
      e.preventDefault();
      // optionally fire off some custom validation handler
      // myValidation();
    };
})(), true);

0

Si vous marquez un élément de formulaire comme required=""alors novalidate=""ne pas d' aide.

Un moyen de contourner la requiredvalidation consiste à désactiver l'élément .


-5

Vous pouvez installer une simple extension Chrome et simplement désactiver la validation à la volée https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

par défaut, tout fonctionnera par défaut, mais vous pourrez désactiver la validation html5 en un seul clic sur l'icône d'extension dans la barre d'outils


Je ne sais pas pourquoi beaucoup de gens n'aiment pas cette solution, cela permet de tester la validation du serveur pour les formulaires HTML5 sans faire exploser le code HTML réel
Andrew Zhilin

3
Je pense qu'il n'est pas aimé car la question se concentre sur la création d' un formulaire HTML5 et la désactivation de la validation automatique pour tous les utilisateurs. Demander à tous vos utilisateurs A) d'utiliser Chrome et B) d'installer une extension avant d'utiliser votre site n'est pas une solution viable.
Kallmanation
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.