Change input color in HTML page

Asked

Viewed 282 times

0

I am developing a simple page in HTML with Javascript also.

But I have a problem, on my page when a data is filled incorrectly, appears a alert and the color of input changes to red, when the die is filled correctly the color of the input should return to the standard, but this does not happen.

How can I resolve this problem?? HTML AND JS ONLY CAN BE USED

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

javascript html

  • Makes an Else in all ifs with Document.getElementById("Cpf").style.borderColor="#FFFFFF"; Has nicer ways to solve, but this one works well

  • Look I think I’ve tried several similar things, but this one I don’t remember, thank you very much :) Tried and ended up not working, well, I’ll look for other ways

  • What can be done instead of using the register button, use jquery when the field changes it executes the function and checks if the fields are correct

  • Do you want validation only when you click Register? ?

  • @Mauroalmeida yes, that’s right

  • That’s what part? I asked 2 questions :-|

  • @Andrelacomski had even forgotten, I can only use js, I’ve even edited the question by putting this detail

  • @Mauroalmeida clicking on register -.-

  • To return the default color of the browser just empty the property borderColor on an Else: document.getElementById("nome").style.borderColor="";

Show 4 more comments

1 answer

0

To change the color of the border again, you can use LSE and apply the same color or even paint green, for example, to show that it is correct.

In the code below, I put in the name as an example

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>

  • I tried here, I even slightly changed one detail and another, ended up not working too, but I appreciate, I’ll see what I can do to solve

  • For nothing, to change the color is like this, if you have another question and can help, we are here. Abs

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.