Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Carcleo

Verificar se browser suporta validação de formulários HTML5

Por , em Desenvolvimento frontend

Recommended Posts

Carcleo    4

Carcleo
Postado

Gostaria de saber se existe (e como é) uma forma de detectar se o "Browser" esta rodando HTML5 ou menor!

 

Se estiver rodando HTML5 eu uso o html5 Validator Senão, uso javaScript para validar campo dos formulários!

 

Tem como?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

Tentei da seguinte forma mas não estou seguro de que está correto:

 

<jsp:include page="../_global/testaAdmin.jsp" />
<jsp:useBean id="constantes" class="util.Constantes" />
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>    
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="../_global/_css/estiloAdmin.css" />
<script src="../../../_global/_js/modernizr.js"></script>
<script language="javascript" src="_js/_validacao/validaAdmin.js"></script>
<title>${constantes.tituloSite}</title>
</head>
<body>
 
 <div id="topo"> <jsp:include page="../_global/topoAdmin.jsp" /> </div>
 <div id="meio"> <jsp:include page="cadastraAdminConteudo.jsp" /> </div>
 <div id="mapa"> <jsp:include page="../_global/mapaAdmin.jsp" /> </div>
 <div id="creditos"> <jsp:include page="../_global/creditosAdmin.jsp" /> </div>
 
 </body>
</html>

E no js:

 

function cadastra(form)
{
if (!Modernizr.canvas)
{
if (document.getElementById("nome").value=="")
{
alert ("Preencha Nome, campo necessário!");
document.getElementById("nome").focus();
return false;
}
}
 
form.submit();
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carcleo    4

Carcleo
Postado

Pois é. Desse jeito:

 

 

function cadastra(form){ if (Modernizr.InputTypes){if (document.getElementById("nome").value==""){alert ("Preencha Nome, campo necessário!");document.getElementById("nome").focus();return false;}}}

Até funciona. Mas parece que esta funcionando ao contrário.

O código:

 

 

if (Modernizr.InputTypes)

Não quer dizer que se houver suporte à html5 validator para validar campos imput?

Então, quando entra no if, ele não dispara JS. Mas o Browser tem suporte à html5. É a ultima versão do Chrome!

Tanto que quando eu faço:

 

 

if (!Modernizr.InputTypes)

Dispara a função javascript.

Onde estou errando na lógica?

 

Ninguém sabe essa gente?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Carcleo, peço desculpas pela demora.

Confesso que li seu tópico rapidamente e não pude dar a atenção necessária, nem te ajudar especificamente no teu problema. Apenas vi que queria fazer deteção de feature e recomendei o Modernizr.

 

Agora que li melhor, posso te dar melhores orientações:

 

Primeiramente, o que você deseja fazer é fornecer fallback para a validação de formulários nativa do HTML5 - isso é, você quer fornecer suporte aos browsers que não suportam essa feature.

 

Eu te recomendei o Modernizr, pois é a biblioteca recomendada para fazer detecção de feature. Mas, para o seu caso, acredito que seja mais fácil e intuitivo detectar se o browser suporta a validação analisando se o método checkValidity() existe no objeto.

 

Primeiro, criemos a função:

function suportaValidacao() {
  return (typeof document.createElement('input').checkValidity == 'function');
}
Essa função retornará um valor booleano (true/false).

 

Você pode fazer essa condicional:

if (!suportaValidacao()) {
  // O que fazer quando o browser não suporta validação
}

Sugiro que dê uma olhada no better-form-validation para ver se é do teu interesse. Faz um bom trabalho entregando formulários validados para browsers que não suportam a validação do HTML5.

 

Espero ter te ajudado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Quanto a sua pergunta sobre o Modernizr:

Quando você faz feature detection usando o Modernizr, você vai receber um valor booleano retornado para fazer o que quiser com ele. No seu caso, deve ser feita uma condicional analisando se o browser não suporta tal feature, usando o operador de negação ! (ponto de exclamação). Um exemplo para validação de campos obrigatórios:

if(!Modernizr.input.required) {
  // O que fazer se o browser NÃO (!) suporta o atributo required
}


Entendeu?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito