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

Question

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

Le problème, c'est que Chrome veut être super utile et valider ces éléments pour moi, sauf qu'il est nul à ce jeu-là. Si la validation intégrée échoue, il n'y a pas de message ou d'indication autre que l'élément qui reçoit le focus. Je pré-remplit les éléments URL avec "http://" Ainsi, ma propre validation personnalisée traite ces valeurs comme des chaînes vides, mais Chrome rejette cette idée. Si je pouvais modifier ses règles de validation, cela fonctionnerait également.

Je sais que je pourrais juste revenir à l'utilisation de type="text" mais je veux bénéficier des améliorations que l'utilisation de ces nouveaux types offre (par exemple, il passe automatiquement à une disposition de clavier personnalisée sur les appareils mobiles) :

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

Answer 1

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

Answer 2

J'ai lu la spécification et fait quelques tests dans Chrome, et si vous attrapez l'événement "invalid" 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 pas testé cela dans d'autres navigateurs.

Answer 3

Je voulais juste ajouter que l'utilisation de l'attribut novalidate dans votre formulaire empêchera seulement 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 invalides font partie de la feuille de style HTML5 boilerplate que j'ai utilisée. J'ai simplement supprimé les entrées du fichier CSS qui concernaient les pseudo-classes. Si quelqu'un trouve une autre solution, faites-le moi savoir.

Answer 4

Au lieu d'essayer de contourner la validation du navigateur, vous pouvez mettre la balise http:// en tant que texte de remplacement. Ceci provient de la page que vous avez indiquée :

Texte de remplacement

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

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

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

Ironie du sort, Firefox 3.5 ne prend pas en charge l'ajout de texte de remplacement dans vos propres formulaires Web. C'est la vie.

Support des caractères d'imprimerie

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

Voici comment vous pouvez inclure du texte de remplacement 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'option placeholder l'ignorera tout simplement. Il n'y a pas de mal, pas de faute. Vérifiez si votre navigateur prend en charge les caractères de remplacement .

Ce ne serait pas exactement la même chose puisqu'elle ne fournirait pas ce "point de départ" à l'utilisateur, mais c'est au moins la moitié du chemin.

Answer 5

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 trouvé la solution sur cette page : http://trac.webkit.org/wiki/Styling%20Form%20Controls