Ir para conteúdo

POWERED BY:

Arquivado

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

josewilson

[Resolvido] Setando atributo Pattern com Javascript

Por , em Javascript

Recommended Posts

josewilson    0

josewilson
Postado

Gostaria de entender por que não funciona e a resolução do problema

 

Instruções:

 

Você abre a página e seleciona se é Físico ou Jurídico caso seja Físico a pattern vai ser X caso seja Jurídico a pattern vai ser J mas o problema é que não está funcionando corretamente se alguem pudesse me explicar aonde está errado eu agradeço!

 

Quando eu seto o pattern direto no input ele funciona até deixei os exemplos embaixo para facilitar

 

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Pattern em Javascript
</title>
</head>
<style type="text/css">
label{display:block;}
input[type=text]:invalid{background:#F33;color:#FFF;}
input[type=text]:valid{background:lightgreen;}
</style>

<script>
function checkPattern()
{
var valor = document.form1.tipo.value;
var input = document.getElementById('cpfcnpj');
if(valor == 'F')
{
	input.setAttribute('pattern','^(\d{3}\.\d{3}\.\d{3}-\d{2})')
}
else
{
	input.setAttribute('pattern','\d{2}.\d{3}.\d{3}/\d{4}-\d{2}')
}
}
</script>
<body>
background verde = correto<br>
background vermelho = errado<br><br>
<form name="form1">
<select name="tipo">
<option value="F">Fisico</option>
<option value="J">Juridico</option>
</select><a href="#" onClick="checkPattern()">Setar</a><br><br>


<label>Testar<input type="text" name="cpfcnpj" id="cpfcnpj" required /></label><input type="submit" value="Executar" /><br><br>
<label>CPF Funcionando<input type="text" pattern="^(\d{3}\.\d{3}\.\d{3}-\d{2})" value="111.111.111-11" name="cpfcnpj" id="cpfcnpj" required /></label>
<label>CNPJ Funcionando<input type="text" pattern="\d{2}.\d{3}.\d{3}/\d{4}-\d{2}" value="11.111.111/1111-11" name="cpfcnpj" id="cpfcnpj" required />

</form>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Arash    0

Arash
Postado
var valor = document.form1.tipo.value;

// HTML

<select name="tipo">

 

Voce está pedindo pra ele buscar ID "tipo", mas "tipo" é o NAME do seu select.

Ou voce troca o NAME por ID, ou coloca

var valor = document.getElementsByName("tipo").item(0).value;

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

a troca com o select e a tag <a> está funcionando bem.

 

o problema é que a ER se perde qndo você seta ela.

Oque era \d fica somente d, e então o padrão não encaixa.

 

 

Estou testando uns casos para corrigir a forma com que a ER é passada pelo js.

Compartilhar este post

Link para o post
Compartilhar em outros sites

josewilson    0

josewilson
Postado

Ok muito obrigado :)

 

Cara consegui, na hora de setar a Pattern o Javascript comia uma barra "\" eu coloquei duas barras ai ele comeu uma e a outra ficou deu certinho mas será que é assim mesmo?

 

Ficou assim pra quem quiser ver

 

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Pattern em Javascript
</title>
</head>
<style type="text/css">
label{display:block;}
input[type=text]:invalid{background:#F33;color:#FFF;}
input[type=text]:valid{background:lightgreen;}
</style>

<script>
function checkPattern()
{
var valor = document.form1.tipo.value;
var input = document.getElementById('cpfcnpj');
if(valor == 'F')
{
	input.setAttribute('pattern','^(\\d{3}\\.\\d{3}\\.\\d{3}-\\d{2})')
}
else
{
	input.setAttribute('pattern','\\d{2}.\\d{3}.\\d{3}/\\d{4}-\\d{2}')
}
}
function getID()
{
 var id = document.getElementById("cpfcnpj").getAttribute("pattern");
 alert(id);
 }
</script>
<body>
background verde = correto<br>
background vermelho = errado<br><br>
<form id="form1" name="form1">
<select id="tipo" name="tipo">
<option value="F">Fisico</option>
<option value="J">Juridico</option>
</select><a href="#" onClick="checkPattern()">Setar</a><br><br>


<label>Testar<input type="text" name="cpfcnpj" id="cpfcnpj" maxlength="50" required /></label><input type="submit" value="Executar" /><a href="#" onClick="getID()">Ver atributo</a>><br><br>
<label>CPF Funcionando<input type="text" pattern="^(\d{3}\.\d{3}\.\d{3}-\d{2})" value="111.111.111-11" name="cpfcnpj" id="cpfcnpj" required /></label>
<label>CNPJ Funcionando<input type="text" pattern="\d{2}.\d{3}.\d{3}/\d{4}-\d{2}" value="11.111.111/1111-11" name="cpfcnpj" id="cpfcnpj" required />



</form>
</body>
</html>

 

Se conseguiu entender o porque disso Willian Bruno?

Compartilhar este post

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

Informação importante

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

  Aceito