6

Sou iniciante em Javascript/jQuery e estou com dúvida de como fazer para liberar um link logo após todos inputs estiverem preenchidos, caso contrário ele se mantém bloqueado:

Segue HTML:

<form id="formulario">
    <label>Usuário</label>
    <input id="usuario"> 
    <label>Senha</label>
    <input id="senha">
    <button type="button" id="login">Login</button>
</form>    

4 Respostas 4

3

Você pode usar o bootstrapValidator. É simples e fica muito bom visualmente

$('#formulario').bootstrapValidator({
        message: 'O valor informado não é válido!"',
        feedbackIcons: {
            valid: 'fa fa-check-circle fa-lg text-success',
            invalid: 'fa fa-times-circle fa-lg',
            validating: 'fa fa-refresh'
        },
        fields: {
            usuario: {
                validators: {
                    notEmpty: {
                        message: 'Preencha o usuário antes de continuar!'
                    }
                }
            },
            senha: {
                validators: {
                    notEmpty: {
                        message: 'Preencha a senha antes de continuar!'
                    }
                }
            },
        }
    }).on('success.field.bv', function(e, data) {
        var $parent = data.element.parents('.form-group');
        $parent.removeClass('has-success');+ '"]').hide();
    }).on('error.form.bv', function(e) {
        isValid = false;
    });

Se por acaso o usuário clicar em login antes de preencher os campo, o botão é desabilitado a as mensagens que foram setadas na função serão mostradas em baixo do input.

1
  • 1
    +1 Não conhecia! Parece ser interessante Commented 2/02/2015 às 12:31
2

É possível resolver seu problema apenas com um atributo HTML5 chamado required.

<form id="formulario" action="http://meusite.com.br">
    <label>Usuário</label>
    <input id="usuario" required> 
    <label>Senha</label>
    <input id="senha" required>
    <input type="submit" id="login" value="Login">
</form> 

Dessa forma o browser faz a validação verificando se campo obrigatório está preenchido.

9
  • 2
    lembrando que o required é um atributo novo do HTML5 Commented 2/02/2015 às 12:07
  • Não faltou @WallaceMaxters, quem faz esse trabalho é o browser, enquanto o formulário não for válido o submit não vai enviar e o browser vai solicitar que os campo sejam preenchidos, ou seja, o submit fica desabilitado. Commented 2/02/2015 às 12:44
  • e onde iria o link neste caso, @Erlon Charles? Creio ser isso que o Wallace quis dizer...
    – Eder
    Commented 2/02/2015 às 12:46
  • No action do Form, vou editar e colocar uma url falsa Commented 2/02/2015 às 12:47
  • 1
    Sem problemas @WallaceMaxters, é a mesma pergunta interpretada de duas formas diferentes, no fim das contas o que importa é mostrar formas diferentes de se resolver o mesmo problema, uma resposta inteiramente completa teria todas as soluções possíveis para este problema. A sua resposta não esta errada e nem a minha, as duas são complementares já que se você tiver um formulário bem formatado a funcionalidade vai ser a mesma que fazendo a validação por javascript e ativando/mostrando um link apenas com um form válido. Commented 2/02/2015 às 14:33
0

Existem várias formas de se fazer isso Éder... Uma delas é usando uma biblioteca chamada Jquery-Validate, existe tbm uma outra biblioteca que eu gosto que se chama validationEngine

Na mão, utilizando apenas recursos do JQuery você pode fazer algo do tipo:

$(document).ready(function(){
    $("#login").click(function(e){
	    // bloqueando envio do form
	    e.preventDefault();
	    var erros = 0;
	    // verifica se ha campos vazios
	    $("#formulario input").each(function(){
		    // conta erros
    		$(this).val() == "" ? erros++ : "";
	    });
	    if(erros > 0 ){	 
		    alert("Existe "+erros+" campo(os) vazio neste fomulário");
        }else{
	    	$("#formulario").submit()
	    }				
   	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<form id="formulario">
<label>Usuário</label>
<input id="usuario"> 
<label>Senha</label>
<input id="senha">
<input type="button" id="login" value="Login">
</form>

0

Se eu entendi direito que você quer liberar um link sendo liberado após os dados preenchidos, faça o seguinte. Altere seu HTML para:

<form id="formulario">
    <label>Usuário</label>
    <input required id="usuario"> 
    <label>Senha</label>
    <input id="senha" required>
    <button type="button" id="login">Login</button>
</form> 

<a id="seu_link" class="disabled">Seu link Bloqueado</a>

E, com o jQuery, faça o seguinte:

$(function(){

    $('#login').click(function(e){


       if ($("#usuario").is(':valid') && $("#senha").is(':valid')) {
           // Ação ao submter o formulário 
           $("#seu_link").removeClass('disabled');
       } else {
          e.preventDefault();
       }
    });


   $(document).on('.disabled', 'click', function(){ return false; });

});

Assim você está verificando se o input está preenchido.

Nota: A verificação com is(':valid') ou is(':invalid') só é possível se o input possuir o atributo required ou o pattern.

Segue o exemplo do JSFiddle

No caso, como imaginei que talvez você, ao invés de querer desbloquear um link, desbloquear o botão que faz o submit.

Então elaborei o seguinte código.

Formulário:

<form id="formulario">
    <label>Usuário</label>
    <input required id="usuario"> 
    <label>Senha</label>
    <input id="senha" required>
    <button type="button" id="login" disabled>Login</button>
</form>

JQuery:

$(function(){

    var $btn = $("#login");

    $("#usuario, #senha").on('keyup', function(){
        if ($('#usuario').is(':valid') && $('#senha').is(':valid')) {
            $btn.attr({disabled:false});
        } else { 
            $btn.attr({disabled: true});
        }
    });

});

Você pode ver esse segundo exemplo nesse JSFiddle Penso que dessa segunda forma, a usabilidade é maior

3
  • 1
    Você esqueceu de colocar a classe disabled no link que ficará desabilitado. Commented 2/02/2015 às 12:07
  • 1
    rsrsrs, valeu @ErlonCharles Commented 2/02/2015 às 12:32
  • @WallaceMaxters, poderia colocar um exemplo no jsfiddle?
    – Eder
    Commented 2/02/2015 às 13:13

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .