Desativar validação de elementos de formulário HTML5

Nos meus formulários, eu gostaria de usar os novos tipos de formulário HTML5, por exemplo <input type="url" />( mais informações sobre os tipos aqui ).

O problema é que o Chrome quer ser super útil e validar esses elementos para mim, exceto que é uma porcaria. Se falhar na validação interna, não há outra mensagem ou indicação além do elemento que está recebendo o foco. Eu preenchei elementos de URL com "http://", e assim minha própria validação personalizada trata esses valores como cadeias de caracteres vazias, mas o Chrome rejeita isso. Se eu pudesse mudar suas regras de validação, isso também funcionaria.

Sei que poderia voltar a usar, type="text"mas quero as boas melhorias usando esses novos tipos de ofertas (por exemplo: ele muda automaticamente para um layout de teclado personalizado em dispositivos móveis):

Então, existe uma maneira de desativar ou personalizar a validação automática?

Se você deseja desativar a validação do lado do cliente para um formulário em HTML5, adicione um atributo novalidate ao elemento do formulário. Ex:

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

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

Eu li as especificações e fiz alguns testes no Chrome. Se você pegar o evento "inválido" e retornar falso, isso parece permitir o envio do formulário.

Estou usando jquery, com este 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>

Não testei isso em nenhum outro navegador.

Eu só queria acrescentar que o uso do atributo novalidate em seu formulário impedirá apenas que o navegador envie o formulário. O navegador ainda avalia os dados e adiciona as pseudo-classes: valid e: invalid.

Descobri isso porque as pseudo classes válidas e inválidas fazem parte da folha de estilo padrão do HTML5 que eu tenho usado. Acabei de remover as entradas no arquivo CSS relacionadas às pseudo classes. Se alguém encontrar outra solução, por favor me avise.

A melhor solução é usar uma entrada de texto e adicionar o atributo inputmode = "url" para fornecer os recursos de teclado da URL. A especificação HTML5 foi pensada para esse fim. Se você mantiver type = "url", obtém a validação da sintaxe que não é útil em todos os casos (é melhor verificar se ele retorna um erro 404 em vez da sintaxe que é bastante permissiva e não é de grande ajuda).

Você também tem a possibilidade de substituir o padrão padrão pelo atributo pattern = "https?: //.+", por exemplo, para ser mais permissivo.

Colocar o atributo novalidate no formulário não é a resposta correta para a pergunta, pois remove a validação de todos os campos no formulário e você pode querer manter a validação dos campos de email, por exemplo.

Usar o jQuery para desativar a validação também é uma solução ruim, pois deve funcionar absolutamente sem JavaScript.

No meu caso, coloquei um elemento select com 2 opções (http: // ou https: //) antes da entrada da URL, porque eu só preciso de sites (e não ftp: // ou outras coisas). Dessa forma, evito digitar esse prefixo estranho (o maior arrependimento de Tim Berners-Lee e talvez a principal fonte de erros de sintaxe da URL) e uso uma entrada de texto simples com inputmode = "url" com espaços reservados (sem HTTP). Eu uso jQuery e script do lado do servidor para validar a existência real do site (no 404) e remover o prefixo HTTP se inserido (evito usar um padrão como pattern = "^ ((? Http).) * $" para evitar colocar o prefixo, porque acho melhor ser mais permissivo)

Em vez de tentar executar uma finalização em torno da validação do navegador, você pode inserir o http://texto como espaço reservado. Isso é da própria página que você vinculou:

Texto do espaço reservado

A primeira melhoria que o HTML5 traz para os formulários da Web é a capacidade de definir o texto do espaço reservado em um campo de entrada . O texto do espaço reservado é exibido dentro do campo de entrada, desde que o campo esteja vazio e sem foco. Assim que você clica em (ou guia para) o campo de entrada, o texto do espaço reservado desaparece.

Você provavelmente já viu texto de espaço reservado antes. Por exemplo, o Mozilla Firefox 3.5 agora inclui texto de espaço reservado na barra de localização que lê “Pesquisar marcadores e histórico”:

Quando você clica na (ou guia) barra de localização, o texto do espaço reservado desaparece:

Ironicamente, o Firefox 3.5 não suporta adicionar texto de espaço reservado aos seus próprios formulários da web. É a vida.

Suporte de espaço reservado

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

Veja como você pode incluir o texto do espaço reservado em seus próprios formulários da web:

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

Os navegadores que não suportam o placeholderatributo simplesmente o ignoram. Nenhum dano, nenhuma falta. Veja se o seu navegador suporta texto de espaço reservado .

Não seria exatamente o mesmo, pois não forneceria esse "ponto de partida" para o usuário, mas está pelo menos na metade do caminho.

Encontrei uma solução para o Chrome com CSS neste seletor a seguir sem ignorar o formulário de verificação nativo, o que poderia ser muito útil.

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

Dessa forma, você também pode personalizar sua mensagem ...

Eu obtive a solução nesta página: http://trac.webkit.org/wiki/Styling%20Form%20Controls

Basta usar o novalidate no seu formulário.

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

Felicidades!!!

Aqui está a função que eu uso para impedir que o chrome e o opera mostrem a caixa de diálogo de entrada inválida, mesmo ao usar o 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;
});

você pode adicionar algum javascript para suprimir essas bolhas desagradáveis ​​de validação e adicionar seus próprios validadores.

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

Se você marcar um elemento do formulário como required=""então novalidate="", não ajudará.

Uma maneira de contornar a requiredvalidação é desativar o elemento .

Você pode instalar uma extensão simples do Chrome e apenas desativar a validação em tempo real https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

por padrão, tudo funcionará como padrão, mas você poderá desativar a validação html5 com um único clique no ícone de extensão na barra de ferramentas