web-dev-qa-db-fra.com

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

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

Le problème est que Chrome veut être très utile et valider ces éléments pour moi, sauf que ça craint. En cas d'échec de la validation intégrée, il n'y a pas d'autre message ou indication que l'élément ayant le focus. Je préremplit les éléments d'URL avec "http://", et ma propre validation personnalisée traite donc ces valeurs comme des chaînes vides. Cependant, Chrome le rejette. Si je pouvais changer ses règles de validation, cela fonctionnerait aussi.

Je sais que je pourrais simplement revenir à l’utilisation de type="text" mais je souhaite que les améliorations apportées à Nice utilisent ces nouveaux types d’offre (par exemple: il passe automatiquement à une disposition de clavier personnalisée sur les appareils mobiles):

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

validationformshtml5input
404
nickf

Si vous souhaitez désactiver la validation côté client pour un formulaire au format 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

718
Jakob S

J'avais lu la spécification et effectué quelques tests dans Chrome. Si vous identifiez l'événement "non valide" et que vous retournez false, cela semble permettre la soumission du formulaire.

J'utilise jquery, avec ce code 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 pas testé cela dans d'autres navigateurs.

32
Ben Boyle

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: valid et: invalid.

J'ai découvert cela parce que les pseudo-classes valides et non valides font partie de la feuille de styles HTML5 que j'ai utilisée. Je viens de supprimer les entrées du fichier CSS relatives aux pseudo-classes. Si quelqu'un trouve une autre solution s'il vous plaît faites le moi savoir.

21
BFTrick

Au lieu d'essayer de faire un tour complet de la validation du navigateur, vous pouvez placer le http:// dans le texte de substitution. Cela provient de la page que vous avez liée:

Texte réservé

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

Vous avez probablement déjà vu du texte fictif auparavant. Par exemple, Mozilla Firefox 3.5 inclut désormais un texte d’espace réservé dans la barre d’emplacement indiquant "Rechercher les favoris et l’historique":

enter image description here

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

enter image description here

Ironiquement, Firefox 3.5 ne prend pas en charge l’ajout de texte fictif à vos propres formulaires Web. C'est la vie.

Support réservé

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

Voici comment inclure du texte de substitution 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’attribut placeholder l’ignoreront tout simplement. Pas de mal, pas de faute. Voir si votre navigateur prend en charge le texte de substitution .

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

14
John Kugelman

La meilleure solution consiste à utiliser une entrée de texte et à ajouter l'attribut inputmode = "url" pour fournir les fonctions de clavier URL. La spécification HTML5 a été pensée à cet effet. Si vous conservez 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 qui n'est pas d'une grande aide).

Vous avez également la possibilité de remplacer le modèle par défaut avec l'attribut modèle = "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 cela supprime la validation de tous les champs du formulaire et vous pouvez souhaiter conserver la validation des champs de courrier électronique, par exemple.

Utiliser jQuery pour désactiver la validation est également une mauvaise solution car cela devrait absolument fonctionner sans JavaScript.

Dans mon cas, je mets un élément de sélection avec 2 options (http: // ou https: //) avant l'entrée de l'URL car j'ai juste besoin de sites Web (et pas de ftp: // ou autre). De cette façon, j'évite de taper ce préfixe étrange (le plus grand regret de Tim Berners-Lee et peut-être la principale source d'erreurs de syntaxe d'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 (n ° 404) et pour supprimer le préfixe HTTP s'il est inséré (j'évite d'utiliser un modèle tel que pattern = "^ ((? Http).) *)" pour éviter de mettre le préfixe car je pense qu'il vaut mieux être plus permissif)

13
plancton

J'ai trouvé une solution pour Chrome avec CSS ce sélecteur suivant sans contourner le formulaire de vérification natif qui peut ê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

9
Val Entin

Utilisez simplement novalidate dans votre formulaire.

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

À votre santé!!!

5
brainSquezer

Voici la fonction que j'utilise pour empêcher chrome et opera d'afficher le dialogue de saisie non valide, 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
Tony Brix