In this code I use the focus () event several times, however in a certain section it is ignored, I would like to know why?
The line that does not work is commented out.
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 test in the above IF is true it changes the placeholder and keeps the focus in that field, change the placeholder it changes, but does not keep the focus on the field I want, if anyone can help ...