Release link after completing form

Question

I’m a beginner in Javascript/jQuery and I’m wondering how to release a link right after all inputs are filled, otherwise it stays locked:

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

Answer 1

You can use the bootstrapValidator. It’s simple and it looks very good visually

$('#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 by chance the user clicks login before filling the fields, the button is disabled to the messages that were set in the function will be shown below the input.

Answer 2

You can solve your problem only with 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> 

This way the browser does the validation checking if required field is filled.

Answer 3

If I understand correctly that you want to release a link being released after the data is filled in, 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 the 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 whether the input is filled in.

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

Follow the example of Jsfiddle

In case, as I imagined that maybe you, instead of wanting to unlock a link, unlock the button that makes the 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 in this second way, the usability is greater

Answer 4

There are several ways to do this Eden... One of them is using a library called Jquery-Validate, There’s another library I like 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>

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