The following code stops working when I add another one almost the same. Although the first part works perfectly, inserting a continuation with similar logic does not even work.
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 normal, the user goes through the regex and the bank, typed correct and the name does not exist, it advances to the next email field.
Doubt, why when I enter the next function nothing works?
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>