I read a few questions here on the PT, but I did not find what I wanted. I made a basic validation with ajax and jquery that is working, but it has an unforeseen. There are two fields: email and time .
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 because they already work, so I did not put them.
What happens is that if the email inserted by the user already exists , the email red and the confirm button will be disabled (So long, alright) . However, if I put the time and the validation is ok (ie not having any team with the same name) the confirm button will be available strong> again
I could not think of something to solve. This is only a primary validation (I do the php validation too and it is 100%), but I wanted this validation as it gets easier for users.