0
I read some questions here on sopt, but I couldn’t find what I wanted. I made a basic validation with ajax and jquery that is working, but there is an unforeseen. Are two camps: email and team.
HTML
<p><div class="input-group">
<span class="inreg input-group-addon glyphicon glyphicon-envelope" aria-hidden="true" id="basic-addon1"></span>
<input type="email" id="email" class="form-control cartolaInput2" placeholder="Email" name="email" required aria-describedby="basic-addon1">
</div></p>
<p> <div class="input-group">
<span class="inreg input-group-addon glyphicon glyphicon-user" aria-hidden="true" id="basic-addon1"></span>
<input type="text" id="time" class="form-control cartolaInput2" placeholder="Nome do seu Clube" maxlength="30" name="time" required aria-describedby="basic-addon1">
</div><p style="font-family:cartolaiff-light;font-size: 12px;color: #666;width:80%"><i>*Este é o nome que ficará em exibição para os outros jogadores! Escolha qualquer nome, sem restrições, desde que não esteja em uso!</i></p></p>
<div class="botoes" style="width: 100%;text-align:center;">
<input type="submit" id="confirmar" value="Enviar!" class="botao-confirmar"/>
</div>
jQuery/ajax
$(document).ready(function() {
$("#email").on("keyup", function() {
$.ajax({
context: 'this',
dataType: 'html',
url: "./componentes/email.php",
type: "post",
data: ({
email: $("#email").val()
}),
success: function(respostae) {
if (respostae == "sim") {
$("#email").css('border-color', 'rgb(38, 202, 94)');
$("#email").parent().find('span').css('border-color', 'rgb(38, 202, 94)');
$("#email").parent().find('span').css('color', 'rgb(38, 202, 94)');
$("#confirmar").prop('disabled', false);
$("#confirmar").css('opacity', '1');
} else {
$("#email").css('border-color', 'red');
$("#email").parent().find('span').css('border-color', 'red');
$("#email").parent().find('span').css('color', 'red');
$("#confirmar").prop('disabled', true);
$("#confirmar").css('opacity', '0.5');
}
}
});
});
$("#time").on("keyup", function() {
$.ajax({
context: 'this',
dataType: 'html',
url: "./componentes/nomet.php",
type: "post",
data: ({
time: $("#time").val()
}),
success: function(respostat) {
if (respostat == "sim") {
$("#time").css('border-color', 'rgb(38, 202, 94)');
$("#time").parent().find('span').css('border-color', 'rgb(38, 202, 94)');
$("#time").parent().find('span').css('color', 'rgb(38, 202, 94)');
$("#confirmar").prop('disabled', false);
$("#confirmar").css('opacity', '1');
} else {
$("#time").css('border-color', 'red');
$("#time").parent().find('span').css('border-color', 'red');
$("#time").parent().find('span').css('color', 'red');
$("#confirmar").prop('disabled', true);
$("#confirmar").css('opacity', '0.5');
}
}
});
});
});
The php codes will not be important as they already work, so I did not put them.
What happens is that if the email entered by the user already exist, the field email will stay red and the confirm button will be deactivated (So far, so good). However, if I put the team and the validation is okay (i.e., having no team with the same name) the button to confirm will be available again
I couldn’t think of anything to fix. This is just a primary validation (I do the validation in php too and it’s 100%), but I wanted this validation because it’s easier for users.
Cara creates a field Hidden and uses as a flag whenever the return of the ajax is already there you see it as 1, then every time you return something from the ajax you check it(so you will know that even if there is no team already the email then the button should remain unavailable)
– Caique Romero
I will try. Jajá put results
– Victor Eyer