-1

Estou desenvolvendo uma página simples em HTML com JavaScript também.

Porém estou com um problema, em minha página quando um dado é preenchido de maneira incorreta, aparece um alert e a cor do input muda para vermelho, quando o dado for preenchido corretamente a cor do input deveria voltar para o padrão, porém isso não acontece.

Como posso resolver este problema?? SÓ PODE SER UTILIZADO HTML E JS

<script>
function Cadastrar() {

    var re_nome = /^[A-Za-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑ ]+$/;
    var re_email = /^[a-zA-Z0-9][a-zA-Z0-9\._-]+@([a-zA-Z0-9\._-]+\.)[a-zA-Z-0-9]{2,3}$/;
    var re_nasci = /^([0-9]{4})-([0-9]{2})-([0-9]{2})$/;
    var re_cpf = /^([\d]{3})([\d]{3})([\d]{3})([\d]{2})$/;

    if (re_nome.test(nome.value) && re_email.test(email.value) && re_nasci.test(nasci.value) && re_cpf.test(cpf.value)) {
        var table = document.getElementById("tabela");
        var row = tabela.insertRow(1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        var cell7 = row.insertCell(6);

        row.appendChild(cell1);
        row.appendChild(cell2);
        row.appendChild(cell3);
        row.appendChild(cell4);
        row.appendChild(cell5);
        row.appendChild(cell6);
        row.appendChild(cell7);

        cell1.innerHTML = nome.value;
        cell2.innerHTML = email.value;
        cell3.innerHTML = nasci.value.replace(re_nasci, "$1/$2/$3");
        cell4.innerHTML = cpf.value.replace(re_cpf, "$1.$2.$3-$4");
        cell5.innerHTML = cidade.value;
        cell6.innerHTML = estado.value;
        cell7.innerHTML = endereco.value;
        //return Limpar();
    }

    if (!re_nome.test(nome.value)) {
        alert("O campo NOME esta incorreto");
        var txtInc =
                document.getElementById("nome").style.borderColor = "#FF0000";
    }

    if (!re_email.test(email.value)) {
        alert("O campo EMAIL esta incorreto");
        var txtInc =
                document.getElementById("email").style.borderColor = "#FF0000";
    }
    alert("slaa");

    if (!re_nasci.test(nasci.value)) {
        alert("O campo NASCI esta incorreto");
        var txtInc = document.getElementById("nasci").style.borderColor = "#FF0000";
    }

    if (!re_cpf.test(cpf.value)) {
        alert("O campo CPF esta incorreto");
        var txtInc = document.getElementById("cpf").style.borderColor = "#FF0000";
    }
}

function Limpar() {
    document.getElementById("form1").reset();
}
</script>
<html>
<head>
    <title>Cadastro de Contatos </title>
    <script type="text/javascript" src="js/Newcontatos.js"></script>
</head>
<body bgcolor="WHITE">
    <table>
        <tr>
            <td><img src="img/tel.png" height="50" width="50"/></td>
            <td><p>Cadastro de contatos</p><br></td>
        </tr>
    </table><br><br>
    <form id="form1">
        <label for="nome">Nome*:</label>
        <input id="nome" type="text" maxlength="50" name="nome"/><br><br><br>

        <label for="email">E-mail*:</label>
        <input id="email" type="text" name="email"/><br><br><br>

        <label for="nasci">Data Nascimento*:</label>
        <input id="nasci" type="date" name="nasci" min="1900-01-01" max="2019-06-30"/><br><br><br>

        <label for="cpf">CPF*:</label>
        <input id="cpf" value="11122233355" maxlength="11" type="int" name="cpf"/><label>(xxx.xxx.xxx-xx)</label><br><br><br>

        <label for="cidade">Cidade:</label>
        <input id="cidade" type="text" name="cidade"/><br><br><br>

        <label for="estado">Estado:</label>
        <select for="estado" type="int" name="estado">
            <option>Selecione</option>
            <option>AC</option>
            <option>AL</option>
            <option>...</option>
        </select><br><br><br>

        <label for="endereco">Endereco:</label>
        <input id="endereco" type="text" name="endereco"/><br><br><br>
    </form>

    <button width=35 height=25 title="Cadastrar" onclick="Cadastrar()">Cadastrar</button>
    <button width=35 height=25 title="Limpar" onclick="Limpar()">Limpar</button><br><br>

    <hr><br><br><br>

    <table id="tabela" width="400" border="1" align="left">
        <tr bgcolor="ff6600">
            <td>Nome:</td>
            <td>Email:</td>
            <td>Data Nascimento:</td>
            <td>CPF:</td>
            <td>Cidade:</td>
            <td>Estado:</td>
            <td>Endereco:</td>
        </tr>
    </table>
</body>
</html>

9
  • Faz um else em todos os ifs com document.getElementById("cpf").style.borderColor="#FFFFFF"; Tem maneiras mais bonitas para resolver, mas essa funciona bem 2/07/2019 às 11:12
  • Olha eu creio já ter tentado várias coisas semelhantes, mas essa em específico não me recordo, muito obrigado :) Tentei e acabou não dando certo, bom, vou procurar outras maneiras 2/07/2019 às 11:15
  • O que pode ser feito ao invés de utilizar o button cadastrar, utilizar jquery quando o campo mudar ele executa a função e verifica se os campos estão corretos 2/07/2019 às 11:33
  • Quer a validação apenas quando clicam em Cadastrar? Ou depois do utilizador preencher o campo? 2/07/2019 às 11:36
  • @MauroAlmeida sim, isso mesmo 2/07/2019 às 11:43

1 Resposta 1

-1

Par alterar a cor da borda novamente, você pode utilizar else e aplicar a mesma cor ou até pintar de verde, por exemplo, para mostrar que está correto.

No código abaixo, coloquei no nome como exemplo

function Cadastrar(){
	
	var re_nome = /^[A-Za-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑ ]+$/; 
	var re_email = /^[a-zA-Z0-9][a-zA-Z0-9\._-]+@([a-zA-Z0-9\._-]+\.)[a-zA-Z-0-9]{2,3}$/;
	var re_nasci = /^([0-9]{4})-([0-9]{2})-([0-9]{2})$/;   
	var re_cpf = /^([\d]{3})([\d]{3})([\d]{3})([\d]{2})$/;
	
	if(re_nome.test(nome.value) && re_email.test(email.value) && re_nasci.test(nasci.value) && re_cpf.test(cpf.value)){
		var table = document.getElementById("tabela");
		var row = tabela.insertRow(1);
		var cell1 = row.insertCell(0);
		var cell2 = row.insertCell(1);
		var cell3 = row.insertCell(2);
		var cell4 = row.insertCell(3);
		var cell5 = row.insertCell(4);
		var cell6 = row.insertCell(5);
		var cell7 = row.insertCell(6);
		
		row.appendChild(cell1);
		row.appendChild(cell2);
		row.appendChild(cell3);
		row.appendChild(cell4);
		row.appendChild(cell5);
		row.appendChild(cell6);
		row.appendChild(cell7);
		
		cell1.innerHTML = nome.value;
		cell2.innerHTML = email.value;
		cell3.innerHTML = nasci.value.replace(re_nasci, "$1/$2/$3");
		cell4.innerHTML = cpf.value.replace(re_cpf, "$1.$2.$3-$4");
		cell5.innerHTML = cidade.value;
		cell6.innerHTML = estado.value;
		cell7.innerHTML = endereco.value;
		//return Limpar();
	}
	
	if(!re_nome.test(nome.value)){
		alert("O campo NOME esta incorreto");
		var txtInc = 
        document.getElementById("nome").style.borderColor="#FF0000";
	}
  else {
        document.getElementById("nome").style.border = '1px solid #999';
  }
		
	if(!re_email.test(email.value)){
		alert("O campo EMAIL esta incorreto");
		var txtInc = 
        document.getElementById("email").style.borderColor="#FF0000";	
	}alert("slaa");
		
	if(!re_nasci.test(nasci.value)){
		alert("O campo NASCI esta incorreto");
		var txtInc = document.getElementById("nasci").style.borderColor="#FF0000";	
	}
		
	if(!re_cpf.test(cpf.value)){
		alert("O campo CPF esta incorreto");
		var txtInc = document.getElementById("cpf").style.borderColor="#FF0000";	
	}
    }
    
    function Limpar(){
    	document.getElementById("form1").reset();	
    }
<html>
	<head>
		<title>Cadastro de Contatos </title>
		<script type="text/javascript" src="js/Newcontatos.js"></script>
	</head>
	
	<body bgcolor="WHITE">
		<table>
			<tr>
				<td><img src="img/tel.png" height="50" width="50"/></td>
				<td><p>Cadastro de contatos</p><br></td>
			</tr>
		</table><br><br>
		<form id="form1">
			
			<label for="nome">Nome*:</label>
			<input id="nome" type="text" maxlength="50" name="nome"/><br><br><br>
			
			<label for="email">E-mail*:</label>
			<input id="email" type="text" name="email"/><br><br><br>
			
			<label for="nasci">Data Nascimento*:</label>
			<input id="nasci" type="date" name="nasci" min="1900-01-01" max="2019-06-30"/><br><br><br>
			
			<label for="cpf">CPF*:</label>
			<input id="cpf" value="11122233355" maxlength="11" type="int" name="cpf"/><label>(xxx.xxx.xxx-xx)</label><br><br><br>
			
			<label for="cidade">Cidade:</label>
			<input id="cidade" type="text" name="cidade"/><br><br><br>
			
			<label for="estado">Estado:</label>
			<select for="estado" type="int" name="estado">
				<option>Selecione</option>
				<option>AC</option>
				<option>AL</option>
				<option>...</option>
			</select><br><br><br>
			
			<label for="endereco">Endereco:</label>
			<input id="endereco" type="text" name="endereco"/><br><br><br>
		</form>
		
		<button width=35 height=25 title="Cadastrar" onclick="Cadastrar()">Cadastrar</button>
		<button width=35 height=25 title="Limpar" onclick="Limpar()">Limpar</button><br><br>
		
		<hr><br><br><br>
		
		<table id="tabela" width="400" border="1" align="left">
			<tr bgcolor="ff6600">
				<td>Nome:</td>
				<td>Email:</td>
				<td>Data Nascimento:</td>
				<td>CPF:</td>
				<td>Cidade:</td>
				<td>Estado:</td>
				<td>Endereco:</td>
			</tr>
		</table>
	</body>
</html>

2
  • tentei aqui, até alterei de leve um detalhe e outro, acabou não dando certo também, mas agradeço, vou ver o que posso fazer para resolver 2/07/2019 às 12:15
  • Por nada, para alterar a cor é assim, se tiver outra dúvida e possa ajudar, estamos por aqui. Abs 2/07/2019 às 12:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .