0

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!');
                }
            },
        });
    });
4
  • "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" - Não consegue o quê? O que seria "travar" o formulário? Commented 22/12/2016 às 16:52
  • Fazer com que o formulário não vá para sua próxima etapa enquanto estiver um login igual. Mesmo com as classes de erro do foundation ativas, quando usuário clica no botão submit o formulário avança com o erro. Commented 22/12/2016 às 17:15
  • Acho que o problema é esse 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.
    – BrTkCa
    Commented 22/12/2016 às 17:36
  • Se eu retirar o novalidate, as mensagens de erro que o foudantion gestiona ficam incorretas. Commented 22/12/2016 às 18:59

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .