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