Release link after form filling

You can solve your problem with only an HTML5 attribute called 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> 

In this way the browser validates by checking if the required field is filled in.

You can use the bootstrapValidator . It's simple and looks great too.

$('#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;
    });

If the user clicks on login before filling in the fields, the button is disabled the messages that have been set in the function will be shown below the input.

There are several ways to do this ... One of them is using a library called Jquery-Validate , there is also another library that I like that is called validationEngine

At hand, using only JQuery features you can do something like:

$(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><formid="formulario">
<label>Usuário</label>
<input id="usuario"> 
<label>Senha</label>
<input id="senha">
<input type="button" id="login" value="Login">
</form>

If I understand correctly that you want to release a link being released after the completed data, do the following. Change your HTML to:

<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>

And, with jQuery , do the following:

$(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; });

});

So you are checking if the input is filled.

Note : Verification with is(':valid') or is(':invalid') is only possible if the input has the attribute required or pattern .

Follow the example of JSFiddle

In this case, how did I imagine that maybe you, instead of wanting to unlock a link, unlock the button that makes submit .

So I wrote the following code.

Form:

<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});
        }
    });

});

You can see this second example in this JSFiddle I think that of this second form, the usability is greater