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

418

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?

nickf
fonte
8
O rascunho do HTML 5.1 menciona um inputmodeatributo que - se eu estiver entendendo o que li corretamente - pode ser usado para especificar que tipo de teclado deve ser oferecido ao usuário quando ele interagir com o campo, sem também implicar regras de validação. Em algum momento no futuro, usar o inputmodeatributo em vez do typeatributo provavelmente será a solução correta para esse problema - mas ainda não.
Mark Amery
@MarkAmery Embora não seria muito difícil conseguir o futuro agora:$('[inputmode]').each(function () { this.attr({type: this.attr('inputmode'), novalidate: true}) });
Marnen Laibow-Koser
1
@ MarnenLaibow-Koser Embora o que você descreveu funcione se tudo o que você deseja fazer é desativar a validação (conforme especificado pelo autor da pergunta), ela não alcança o mesmo resultado que inputmodeseria. Fazendo as coisas do seu jeito, você ainda não pode (por exemplo) ler valores não numéricos que o usuário digita em uma caixa de entrada do tipo number. Por exemplo, tente digitar algo não numérico na caixa de texto deste violino e clicar no botão.
Mark Amery
@MarkAmery Interessante. Isso <input type='number'>ocorre porque não aceita valores não numéricos?
Marnen Laibow-Koser
@ MarnenLaibow-Koser Acho que sim. A resposta aceita nesta pergunta sobre o problema inclui um link para especificar que o respondente afirma exigir esse comportamento.
Mark Amery

Respostas:

752

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

Jakob S
fonte
83
novalidate="novalidate"e novalidate=""é uma sintaxe válida também.
bassim 30/05
9
@bassim Sintaxe válida, mas excessivamente detalhada - por que digitar mais do que o necessário?
user1569050
11
@ user1569050 Por exemplo, em estruturas como o CakePHP, ele usará o novalidate="novalidate"método quando você definir o novalidate => truena $optionsmatriz do FormHelper::create(). Graças Bassim pela informação adicional :)
Jelmer
12
@ rybo111 Esta é a validação do lado do cliente, que é boa para diminuir o número de solicitações ao servidor. Não é desculpa para facilitar a validação no lado do servidor.
Martti
11
@martti Eu estava me referindo ao fato de que, se estou testando alguma nova validação PHP, posso desativar rapidamente a validação JavaScript desse formulário, para evitar a necessidade de preencher corretamente o formulário inteiro. Eu deveria ter escrito "mais fácil de testar".
precisa saber é o seguinte
31

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.

Ben Boyle
fonte
Excelente - eu vou experimentar amanhã e informar como vai. Obrigado.
nickf
Uau! Eu estava tendo um tempo muito difícil olhando para onde foi o meu evento de envio. Obrigado senhor!
Gipsy King
2
O FireFox está validando a alteração de entrada. O evento 'inválido' não é acionado. Então, não há solução para mim.
Niels Steenbeek
7
amanhã nunca chega :)
Lucky Soni
4
Não funciona Eu criei o código um trecho. Capturar o invalidevento e retornar falso não permite o envio do formulário.
Dan Dascalescu 07/07
23

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.

BFTrick
fonte
Como foram chamadas as entradas?
tm_forthefuture
1
Haha - não sei mais me desculpe. Isso foi há 3 anos atrás agora. :(
BFTrick
1
Você quer dizer <form action="" method="" class="" id="" novalidate>
:;
15

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)

Plancton
fonte
13

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

insira a descrição da imagem aqui

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

insira a descrição da imagem aqui

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.

John Kugelman
fonte
5
+1 para a dica, mas infelizmente não será uma solução para mim. Ainda não quero validação, principalmente porque o UX é muito ruim.
nickf
10

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

Val Entin
fonte
1
Isso não funciona na versão mais recente do Chrome (29), eu me pergunto se ele por causa de piscar
Blowsie
5

Basta usar o novalidate no seu formulário.

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

Felicidades!!!

brainSquezer
fonte
1
que tal desativar a validação para uma única tag de entrada?
Tobias Kolb
0

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;
});
Tony Brix
fonte
0

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);
Tobias Kolb
fonte
0

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 .

cweiske
fonte
-5

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

Andrew Zhilin
fonte
Não tenho certeza por isso que muitas pessoas não gostam desta solução, que permitem a validação do servidor de teste para formulários HTML5 sem toching código HTML real
Andrew Zhilin
3
Eu acredito que isso não é apreciado, porque a pergunta se concentra em criar um formulário HTML5 e desativar a validação automática para todos os usuários. Pedir a todos os seus usuários A) use o chrome e B) instale uma extensão antes de usar o site não é uma solução sustentável.
Kallmanation