Enable 'invalid input' from foundation 6 via JS / jQuery

0

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!');
                }
            },
        });
    });
    
asked by anonymous 22.12.2016 / 17:22

0 answers