Existe uma maneira de exigir que as entradas em dois campos do formulário correspondam usando HTML5? Ou isso ainda precisa ser feito com javascript? Por exemplo, se você tiver dois campos de senha e quiser ter certeza de que um usuário inseriu os mesmos dados em cada campo, há alguns atributos ou outra codificação que pode ser feita para conseguir isso?
98
Respostas:
Não exatamente com a validação HTML5, mas um pouco de JavaScript pode resolver o problema. Siga o exemplo abaixo:
fonte
oninput="check(this)"
ao primeiro campo de senha e 2) alterandoinput.value
a função paradocument.getElementById('password_confirm').value
. Assim se tornaif (document.getElementById('password_confirm').value != document.getElementById('password').value)
Você pode, com expressões regulares, padrões de entrada (verifique a compatibilidade do navegador )
fonte
pattern
atributo deve ser omitido para opassword_two
campo. Como atualmente, se você digitar uma senha, que tem menos de 6 caracteres nopassword_two
campo, deixando empassword
branco - ela mostrará umaPlease enter the same Password as above
mensagem de validação. O que pode ser mais confuso: a mesma coisa acontece se você colocar nos dois campos exatamente a mesma senha, que é menor que 6 caracteres.Uma solução simples com javascript mínimo é usar o padrão de atributo html (compatível com a maioria dos navegadores modernos). Isso funciona definindo o padrão do segundo campo com o valor do primeiro campo.
Infelizmente, você também precisa escapar da regex, para a qual não existe uma função padrão.
fonte
<input type="password" name="password" oninput="document.getElementById('confirm').pattern = this.value.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&')" required><input type="password" id="confirm" name="confirm" pattern="" title="Fields must match" required>
Não legível como o seu, mas evita o script / função separada.O JavaScript será necessário, mas a quantidade de código pode ser reduzida ao mínimo usando um
<output>
elemento intermediário e umoninput
manipulador de formulários para realizar a comparação (padrões e validação podem aumentar esta solução, mas não são mostrados aqui por uma questão de simplicidade):fonte
Não apenas HTML5, mas um pouco de JavaScript
Clique [aqui] https://codepen.io/diegoleme/pen/surIK
HTML
JAVASCRIPT
fonte
As respostas que usam padrão e regex gravam a senha do usuário nas propriedades de entrada como texto simples
pattern='mypassword'
. Isso só ficará visível se as ferramentas do desenvolvedor estiverem abertas, mas ainda não parece uma boa ideia.Outro problema com o uso de padrão para verificar uma correspondência é que você provavelmente desejará usar o padrão para verificar se a senha está no formato correto, por exemplo, letras e números mistos.
Também acho que esses métodos não funcionarão bem se o usuário alternar entre as entradas.
Esta é minha solução que usa um pouco mais de JavaScript, mas executa uma verificação de igualdade simples quando qualquer entrada é atualizada e, em seguida, define uma validade de HTML personalizado. Ambas as entradas ainda podem ser testadas para um padrão, como formato de e-mail ou complexidade de senha.
Para uma página real, você mudaria os tipos de entrada para 'senha'.
fonte
Como foi mencionado em outras respostas, não existe uma maneira pura de HTML5 de fazer isso.
Se você já estiver usando JQuery , isso deve fazer o que você precisa:
fonte