Estou desenvolvendo um formulário de cadastro de logins.
O login ele deve ser único. Toda vez que é digitado um login no campo o evento onblur faz uma conexão em ajax onde é verificado se no banco existe tal login digitado.
Esse formulário é feito em foundation 6. Segue o código do formulário.
Acontece que quando é identificado o login no banco de dados, eu não consigo fazer o formulário 'travar' até que o usuário digite um login válido. Fiz em jQuery ativando as classes de erro dos campos porém, mesmo assim, o usuário consegue prosseguir com o cadastro.
Há alguma forma de ativar o erro do form do foundation 6 através do JS/jQuery?
HTML: (foundation 6)
<form method="POST" name="contrato" action="teste.php" target="_blank" data-abide novalidate>
<label id="labelTeste" for="teste">Login do Usuário *
<input name="teste" pattern="[A-Za-z]{3}[.][A-Za-z]{3}" maxlength="100" id="teste" type="text" placeholder="nome.sobrenome" aria-describedby="helpLoginUsuario" required>
<span id="spanTeste" class="form-error"> Campo obrigatório</span>
</label>
<p class="help-text" id="helpTeste">Login do usuário</p>
</form>
JS/jQuery/Ajax:
$('#teste').on('blur', function(){
var url = 'ajax/teste.php';
var usuario = $('#teste').val();
$.ajax({
type : 'post',
data : {
"usuario" : usuario
},
url : url,
cache : false,
dataType : 'html',
timeout : 120000,
success : function(data) {
if(data > 0)
{
$('#labelTeste').addClass('is-invalid-label');
$('#teste').attr('data-invalid', '');
$('#spanTeste').addClass('is-visible');
$('#spanTeste').text('Este usuário já existe, por favor, utilize outro!');
} else {
$('#labelTeste').removeClass('is-invalid-label');
$('#teste').removeAttr('data-invalid');
$('#spanTeste').removeClass('is-visible');
$('#spanTeste').text('Campo obrigatório');
$('#helpTeste').text('Usuário válido!');
}
},
});
});
novalidate
no formulário, porquê caso o login seja inválido, você poderia marcar as entradas e invalidar o formulário - dessa forma o usuário não vai conseguir prosseguir.