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

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?

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

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.

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.

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)

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":

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

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.

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

Utilisez simplement novalidate dans votre formulaire.

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

À votre santé!!!

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;
});

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);

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 .

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