Javascript error, function stops working when I add another

Asked

Viewed 51 times

1

The following code stops working when I add another almost identical one. Although the first part works perfectly, by inserting a continuation with similar logic not even the first part works.

I have the following form:

function CriaRequest() {
	try{
	request = new XMLHttpRequest();        
	}catch (IEAtual){
		try{
        request = new ActiveXObject("Msxml2.XMLHTTP");       
        }catch(IEAntigo){
        	try{
            request = new ActiveXObject("Microsoft.XMLHTTP");          
            }catch(falha){
             request = false;
            }
        }
    }
    if (!request) 
    alert("Seu Navegador não suporta Ajax!");
    else
    return request;
}

function nome_existe() {
	
	if(!valida_nome()) { // caso seja inválido
	document.getElementById("input_nome_cad").focus();
	return;
	}
	var nome = document.getElementById("input_nome_cad").value;
	var xmlreq = CriaRequest();
	xmlreq.open("GET", "mysqli_select_ajax.php?nome_cad=" + nome, true);
	xmlreq.onreadystatechange = function(){
		if (xmlreq.readyState == 4 && xmlreq.status == 200){
	    	if(xmlreq.responseText == "Nome já existe!"){
	    		document.getElementById("input_nome_cad").value='';
				document.getElementById("input_nome_cad").placeholder = xmlreq.responseText;
				document.getElementById("input_nome_cad").focus();
	    	}
	    }
		return true;
	    };
	    xmlreq.send(null);
}
function valida_nome(){
	var filter_nome = /^([a-zA-Zà-úÀ-Ú0-9]|\s)+$/ ;
	if(!filter_nome.test(document.getElementById("input_nome_cad").value)){
	document.getElementById("input_nome_cad").value='';
	document.getElementById("input_nome_cad").placeholder = "Nome inválido";
	document.getElementById("input_nome_cad").style.borderColor = "#ff0000";
	document.getElementById("input_nome_cad").style.outline = "#ff0000";
	document.getElementById("input_nome_cad").focus();
	document.getElementById("input_nome_cad").onkeydown = function keydown_nome(){
	document.getElementById("input_nome_cad").style.borderColor = "#999999";
	document.getElementById("input_nome_cad").style.outline = null;
				}
	return false;	
	}
	return true;
}
<head>
	<script src="valida_user_ajax.js"></script>
</head>
<form id="form_user_cad" name="form_user_cad" method="POST"  action="recebe_form_user.php" >
 <input type="text"	id="input_nome_cad"	name="nome_cad"	placeholder="Nome e Sobrenome" autofocus onblur="nome_existe()"><br/>
 <input type="text"	id="input_email_cad" name="email_cad" placeholder="Insira o Email" onblur="email_existe()"><br/>
 <input type="submit" 	class="btn_enviar_cad"	 name="enviar_cad"  value="Criar Conta"  >
</form>

It works normally, the user goes through the regex and the database, if he typed correctly and the name does not exist, advances to the next email field.

Doubt, because when I enter the next function nothing works?

next function that is sequential with the previous one.

function CriaRequest() {
	try{
	request = new XMLHttpRequest();        
	}catch (IEAtual){
		try{
        request = new ActiveXObject("Msxml2.XMLHTTP");       
        }catch(IEAntigo){
        	try{
            request = new ActiveXObject("Microsoft.XMLHTTP");          
            }catch(falha){
             request = false;
            }
        }
    }
    if (!request) 
    alert("Seu Navegador não suporta Ajax!");
    else
    return request;
}

function nome_existe() {
	
	if(!valida_nome()) { // caso seja inválido
	document.getElementById("input_nome_cad").focus();
	return;
	}
	var nome = document.getElementById("input_nome_cad").value;
	var xmlreq = CriaRequest();
	xmlreq.open("GET", "mysqli_select_ajax.php?nome_cad=" + nome, true);
	xmlreq.onreadystatechange = function(){
		if (xmlreq.readyState == 4 && xmlreq.status == 200){
	    	if(xmlreq.responseText == "Nome já existe!"){
	    		document.getElementById("input_nome_cad").value='';
				document.getElementById("input_nome_cad").placeholder = xmlreq.responseText;
				document.getElementById("input_nome_cad").focus();
	    	}
	    }
		return true;
	    };
	    xmlreq.send(null);
}
function valida_nome(){
	var filter_nome = /^([a-zA-Zà-úÀ-Ú0-9]|\s)+$/ ;
	if(!filter_nome.test(document.getElementById("input_nome_cad").value)){
	document.getElementById("input_nome_cad").value='';
	document.getElementById("input_nome_cad").placeholder = "Nome inválido";
	document.getElementById("input_nome_cad").style.borderColor = "#ff0000";
	document.getElementById("input_nome_cad").style.outline = "#ff0000";
	document.getElementById("input_nome_cad").focus();
	document.getElementById("input_nome_cad").onkeydown = function keydown_nome(){
	document.getElementById("input_nome_cad").style.borderColor = "#999999";
	document.getElementById("input_nome_cad").style.outline = null;
				}
	return false;	
	}
	return true;
}
function email_existe() {
	
	if(!valida_email()) { // caso seja inválido
	document.getElementById("input_email_cad").focus();
	return;
	}
	var email = document.getElementById("input_email_cad").value;
	var xmlreq = CriaRequest();
	xmlreq.open("GET", "mysqli_select_ajax.php?email_cad=" + email, true);
	xmlreq.onreadystatechange = function(){
		if (xmlreq.readyState == 4 && xmlreq.status == 200){
	    	if(xmlreq.responseText == "Email já existe!"){
	    		document.getElementById("input_email_cad").value='';
				document.getElementById("input_email_cad").placeholder = xmlreq.responseText;
				document.getElementById("input_email_cad").focus();
	    	}
	    }
		return true;
	    };
	    xmlreq.send(null);
}

function valida_email(){
	var filter_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i ;
	if(!filter_email.test(document.getElementById("input_email_cad").value)){
	document.getElementById("input_email_cad").value='';
	document.getElementById("input_email_cad").placeholder = "Email inválido";
	document.getElementById("input_email_cad").style.borderColor = "#ff0000";
	document.getElementById("input_email_cad").style.outline = "#ff0000";
	document.getElementById("input_email_cad").focus();
	document.getElementById("input_email_cad").onkeydown = function keydown_email(){
	document.getElementById("input_email_cad").style.borderColor = "#999999";
	document.getElementById("input_email_cad").style.outline = null;
	return false;	
	}
	return true;
}
<head>
	<script src="valida_user_ajax.js"></script>
</head>
<form id="form_user_cad" name="form_user_cad" method="POST"  action="recebe_form_user.php" >
 <input type="text"	id="input_nome_cad"	name="nome_cad"	placeholder="Nome e Sobrenome" autofocus onblur="nome_existe()"><br/>
 <input type="text" id="input_email_cad" name="email_cad" placeholder="Insira o Email" onblur="email_existe()"><br/>
	
	<input type="submit" 	class="btn_enviar_cad"	 name="enviar_cad"  value="Criar Conta"  >
</form>

javascript ajax

1 answer

2


I took the liberty of commenting on the problem line, but this is it:

document.getElementById("input_email_cad").onkeydown = function keydown_email(){

In it you are opening "Initiating" a function (keydown_email()), but is not closing function keys valuda_email() above it.

Just put the keys after the return true; and ready.

function CriaRequest() {
	try{
	request = new XMLHttpRequest();        
	}catch (IEAtual){
		try{
        request = new ActiveXObject("Msxml2.XMLHTTP");       
        }catch(IEAntigo){
        	try{
            request = new ActiveXObject("Microsoft.XMLHTTP");          
            }catch(falha){
             request = false;
            }
        }
    }
    if (!request) 
    alert("Seu Navegador não suporta Ajax!");
    else
    return request;
}

function nome_existe() {
	
	if(!valida_nome()) { // caso seja inválido
	document.getElementById("input_nome_cad").focus();
	return;
	}
	var nome = document.getElementById("input_nome_cad").value;
	var xmlreq = CriaRequest();
	xmlreq.open("GET", "mysqli_select_ajax.php?nome_cad=" + nome, true);
	xmlreq.onreadystatechange = function(){
		if (xmlreq.readyState == 4 && xmlreq.status == 200){
	    	if(xmlreq.responseText == "Nome já existe!"){
	    		document.getElementById("input_nome_cad").value='';
				document.getElementById("input_nome_cad").placeholder = xmlreq.responseText;
				document.getElementById("input_nome_cad").focus();
	    	}
	    }
		return true;
	    };
	    xmlreq.send(null);
}
function valida_nome(){
	var filter_nome = /^([a-zA-Zà-úÀ-Ú0-9]|\s)+$/ ;
	if(!filter_nome.test(document.getElementById("input_nome_cad").value)){
	document.getElementById("input_nome_cad").value='';
	document.getElementById("input_nome_cad").placeholder = "Nome inválido";
	document.getElementById("input_nome_cad").style.borderColor = "#ff0000";
	document.getElementById("input_nome_cad").style.outline = "#ff0000";
	document.getElementById("input_nome_cad").focus();
	document.getElementById("input_nome_cad").onkeydown = function keydown_nome(){
	document.getElementById("input_nome_cad").style.borderColor = "#999999";
	document.getElementById("input_nome_cad").style.outline = null;
				}
	return false;	
	}
	return true;
}

  function email_existe() {
	
	if(!valida_email()) { // caso seja inválido
	document.getElementById("input_email_cad").focus();
	return;
	}
	var email = document.getElementById("input_email_cad").value;
	var xmlreq = CriaRequest();
	xmlreq.open("GET", "mysqli_select_ajax.php?email_cad=" + email, true);
	xmlreq.onreadystatechange = function(){
		if (xmlreq.readyState == 4 && xmlreq.status == 200){
	    	if(xmlreq.responseText == "Email já existe!"){
	    		document.getElementById("input_email_cad").value='';
				document.getElementById("input_email_cad").placeholder = xmlreq.responseText;
				document.getElementById("input_email_cad").focus();
	    	}
	    }
		return true;
	    };
	    xmlreq.send(null);
}

function valida_email(){
	var filter_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i ;
	if(!filter_email.test(document.getElementById("input_email_cad").value)){
	document.getElementById("input_email_cad").value='';
	document.getElementById("input_email_cad").placeholder = "Email inválido";
	document.getElementById("input_email_cad").style.borderColor = "#ff0000";
	document.getElementById("input_email_cad").style.outline = "#ff0000";
	document.getElementById("input_email_cad").focus();
    //Seu problema está nesta linha abaixo. Está abrindo uma função mas não está fechando as chaves do if().
	document.getElementById("input_email_cad").onkeydown = function keydown_email(){
	document.getElementById("input_email_cad").style.borderColor = "#999999";
	document.getElementById("input_email_cad").style.outline = null;
	return false;	
	}
	return true;
      }
}
<head>
	<script src="valida_user_ajax.js"></script>
</head>
<form id="form_user_cad" name="form_user_cad" method="POST"  action="recebe_form_user.php" >
 <input type="text"	id="input_nome_cad"	name="nome_cad"	placeholder="Nome e Sobrenome" autofocus onblur="nome_existe()"/><br/>
 <input type="text" id="input_email_cad" name="email_cad" placeholder="Insira o Email" onblur="email_existe()"/><br/>
	
	<input type="submit" 	class="btn_enviar_cad"	 name="enviar_cad"  value="Criar Conta"  >
</form>

It is worth noting that there are better ways to make these validations.

Browser other questions tagged javascript ajax

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