I'm developing a logins registration form.
The login should be unique. Every time a login is entered in the field the onblur event makes a connection in ajax where it is checked if there is a typed login in the database.
This form is done in foundation 6. Follow the form code.
It turns out that when the login to the database is identified, I can not make the form 'hang' until the user enters a valid login. I did in jQuery activating the error classes of the fields, however, the user can still proceed with the registration.
Is there a way to activate the foundation 6 form error via 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!');
}
},
});
});