Javascript Focus() does not work on a particular code snippet

Asked

Viewed 401 times

0

In this code I use several times the event Focus(), however in a certain stretch it is ignored, I would like to know why?

The line that does not work is commented.

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){
	    	document.getElementById("input_nome_cad").value='';
			document.getElementById("input_nome_cad").placeholder = xmlreq.responseText;
		}
		if(document.getElementById("input_nome_cad").placeholder == "Nome já existe!"){
			document.getElementById("input_nome_cad").focus();
/*Essa linha abaixo funciona, porém o focus() acima não, ele escreve o placeholder e pula pro próximo campo*/
			document.getElementById("input_nome_cad").placeholder = "Esse funciona, mas não o focus";
		}
	    
	}
	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;
}
function valida_email_conf(){		
		if((form_user_cad.conf_email_cad.value) != (form_user_cad.email_cad.value)){
		document.getElementById("input_conf_email_cad").value='';
		document.getElementById("input_conf_email_cad").placeholder = "Email diferente";
		document.getElementById("input_conf_email_cad").style.borderColor = "#ff0000";
		document.getElementById("input_conf_email_cad").style.outline = "#ff0000";
		document.getElementById("input_conf_email_cad").focus();
		document.getElementById("input_conf_email_cad").onkeydown = function keydown_email_conf(){
		 	document.getElementById("input_conf_email_cad").style.borderColor = "#999999";
			document.getElementById("input_conf_email_cad").style.outline = null;
			} 
		}
}
<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>

My intention is if the above IF test is true it changes the placeholder and keeps Focus in that field, change the placeholder it changes, but it does not keep Focus in the field I wish, if anyone can help...

  • https://jsfiddle.net/v8q4uuz1/1/ tested and worked

  • When do you get "Name already exists!" in the placeholder?

  • Document.getElementById("input_cad"). placeholder = xmlreq.responseText; } if(Document.getElementById("input_cad").placeholder == "Name already exists!") //being that responseText, is the result of the query in the database, which returns either the name typed home does not exist in the database or "Name already exists!"

  • I don’t understand what you mean by that line: linha abaixo funciona, porém o focus() acima não, ele escreve o placeholder e pula pro próximo campo*/. Are you getting the ìnput name, and placeholder and Focus are on it. Should I switch to email? What is the behavior for a name that already exists, clear the field? Continue?

  • @Randrade starting 3 lines above the comment...->Document.getElementById("input_cad"). placeholder = xmlreq.responseText;/picks up the answer(could be the name the guy typed if it doesn’t exist or the string message "Name already exists! ") from the database by xmlreq.responseText and puts it in the placeholder/->if(Document.getElementById("input_cad").placeholder == "Name already exists!"){/*If the placeholder has received "Name already exists!" ->Document.getElementById("input_nome_cad"). Focus();/this does not happen or if it happens it happens , but advances, I do not know, I wanted to be focused on this input/-

  • >Document.getElementById("input_cad"). placeholder = "This works, but not Focus";/this message if you see the string "Name already exists" through xmlreq.responseText, is in the placeholder/ The general idea is that the user puts the name in the input if you pass in regex will check if it has the name in the bank, if it has not in the bank, keeps the name typed in the placeholder and

  • jumps to the next field, if it has the name in the database, or it does not pass in regex, the field_cad gets Focus(), red borders and red Outline with the message "Name already exists!" or "Invalid name" in the placeholder, and when the user starts typing triggers the "onkeydown" which puts the border and Outline to the original css to perform the check again*/

  • @Randrade got I threw the Focus out of the instruction block that makes the comparison.... Vlw

Show 3 more comments
No answers

Browser other questions tagged

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