4

Boa noite.

Estou tentando fazer uma tela de registro e login para uma aplicação que vai salvar os dados em localStorage. Para evitar que o usuário se cadastre com dados incompletos desabilitei o botão de submit usando disabled.

Minha intenção é quando todos os campos forem preenchidos a propriedade disabled seja removida e o botão possa ser clicado mas não consigo remover o disabled, tentei de várias maneiras e nada. Creio que a maneira mais fácil seria essa:

var operacao = "A"; //"A"=Adição; "E"=Edição
var indice_selecionado = -1; //Índice do item selecionado na lista
var tbUsuarios;

//aqui o botão submit já está desabilitado
$(document).ready(function() {
    $('#buttonSubmitRegister').prop('disabled', true);
});

$(function () {
    tbUsuarios = localStorage.getItem("tbUsuarios");// Recupera os dados armazenados
    tbUsuarios = JSON.parse(tbUsuarios); // Converte string para objeto
    if (tbUsuarios === null) // Caso não haja conteúdo, iniciamos um vetor vazio
        tbUsuarios = [];
});

function Adicionar() {
    var usuario = JSON.stringify({
        Nome: $("#txtNome").val(),
        email: $("#txtEmail").val(),
        Senha: $("#txtSenha").val()
    });
    //aqui tentei remover o disabled quando os campos forem preenchidos
    if ($("#txtNome").val().length > 1 && $("#txtEmail").val().length > 1 && $("#txtSenha").val().length > 1){
        $(document).ready(function() {
            $('#buttonSubmitRegister').prop('disabled', false);
        });
        tbUsuarios.push(usuario);
        localStorage.setItem("tbUsuarios", JSON.stringify(tbUsuarios));
        alert("Usuário Cadastrado com Sucesso!");
        return true;
    }
}
<form id="formRegister" nome="formRegister" class="positionFormRegister">
                <div class="input-group">
                    <span class="input-group-addon"></span>
                    <label for="txtNome"></label>
                    <input id="txtNome" name="txtNome" type="text" class="form-control" placeholder="Crie seu nome de Usuário" autocomplete="off">
                </div>
                <div class="input-group">
                    <span class="input-group-addon"></span>
                    <label for="txtEmail"></label>
                    <input id="txtEmail" name="txtEmail" type="text" class="form-control" placeholder="Seu endereço de e-mail" autocomplete="off">
                </div>
                <div class="input-group">
                    <span class="input-group-addon"></span>
                    <label for="txtSenha"></label>
                    <input id="txtSenha" name="txtSenha" type="password" class="form-control" placeholder="Crie sua senha" autocomplete="off">
                </div>
                <!--Botão Submit-->
                <div>
                    <input id="buttonSubmitRegister" type="submit" class="btn btn-primary btn-lg positionFormRegister" value="Cadastrar no e-Pro &raquo;" onclick="Adicionar()">
                </div>
            </form>

Alguém tem alguma idéia de como resolver? Obrigado pela ajuda.

1
  • Eu tentei também com ' $("#txtNome").val().length != " " '. Mas não deu certo Commented 15/04/2017 às 5:46

2 Respostas 2

3

Você quer que quando o campo tenha o numero de caracteres corretos, ele seja habilitado novamente certo? Note que o $(document).keyup(function(){}); vai fazer a verificação sempre que uma tecla for pressionada. Meu código exemplo:

$(document).keyup(function() {
    if($("#email-test").val().length > 0 && $("#password-test").val().length > 0) {
        $(document).ready(function() {
            $('#submit-test').prop('disabled', false);
        });
    }
});

Exemplo no jsfiddle: https://jsfiddle.net/Knautiluz/L9vqatoh/2/

Tente assim com o evento fora da função adicionar, do contrário ele só vai ser computado quando a função for acionada:

var operacao = "A"; //"A"=Adição; "E"=Edição
var indice_selecionado = -1; //Índice do item selecionado na lista
var tbUsuarios;

//aqui o botão submit já está desabilitado
$(document).ready(function() {
  $('#buttonSubmitRegister').prop('disabled', true);
});

$(function() {
  tbUsuarios = localStorage.getItem("tbUsuarios"); // Recupera os dados armazenados
  tbUsuarios = JSON.parse(tbUsuarios); // Converte string para objeto
  if (tbUsuarios === null) // Caso não haja conteúdo, iniciamos um vetor vazio
    tbUsuarios = [];
});

function Adicionar() {
  var usuario = JSON.stringify({
    Nome: $("#txtNome").val(),
    email: $("#txtEmail").val(),
    Senha: $("#txtSenha").val()
  });
}



$(document).keyup(function() {
  // habilita caso o numero de caracteres seja maior que 1.
  if ($("#txtNome").val().length > 1 && $("#txtEmail").val().length > 1 && $("#txtSenha").val().length > 1) {
    $(document).ready(function() {
      $('#buttonSubmitRegister').prop('disabled', false);
    });
    tbUsuarios.push(usuario);
    localStorage.setItem("tbUsuarios", JSON.stringify(tbUsuarios));
    alert("Usuário Cadastrado com Sucesso!");
    return true;
  }
  // desabilita o campo o valor seja apagado.
  if ($("#txtNome").val().length < 1 && $("#txtEmail").val().length < 1 && $("#txtSenha").val().length < 1) {
    $(document).ready(function() {
      $('#buttonSubmitRegister').prop('disabled', true);
    });
  }
});

Não sei exatamente qual as suas necessidades, mas essa verificação pode ser facilmente removida pelo usuário, claro que vai diminuir altamente o número que cadastros feitos faltando algum dado... mas caso seja um usuário malicioso ele pode manipular isso, então é bom que exista uma verificação no lado do servidor também. Como você está desenvolvendo uma aplicação que usa o localStorage não sei se há muito que possa ser feito. Mas dou essa dica também caso no futuro alguém encontre isso e esteja desenvolvendo algo em PHP por exemplo, e ache que simplesmente isso vai resolver o problema.

0
1

Não adianta modificar o valor do atributo disabled para falso.

Os navegadores não lêem o valor do atributo. Eles apenas consideram sua presença. Se o atributo existe, o elemento que o tem está desabilitado. Se o atributo não existe, o elemento não está desabilitado.

Portanto, as quatro formas abaixo são equivalentes:

<input type="button" disabled>
<input type="button" disabled="true">
<input type="button" disabled="false">
<input type="button" disabled="Fui na Espanha buscar o meu chapéu, azul e branco da cor daquele céu"> <!--Ou qualquer outra canção de sua preferência-->

A única forma de reabilitar o seu botão é removendo o atributo. Você pode utilizar a função removeProp do jQuery para isso. E.g.:

$("#buttonSubmitRegister").removeProp("disabled");

Se algum dia você encontrar um navegador que habilite um elemento que esteja com o valor do atributo disabled igual a false, saiba que esse navegador não segue a especificação do HTML 5:

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

"A presença de um atributo booleano em um elemento representa o valor verdadeiro e a ausência do atributo representa o valor falso".

Fonte: https://www.w3.org/TR/html5/infrastructure.html#boolean-attribute

3
  • A idéia é boa, mas tem isso: "Also note that the .removeProp() method should not be used to set these properties to false. Once a native property is removed, it cannot be added again. See .removeProp() for more information. " Commented 15/04/2017 às 15:40
  • Interessante essa, mas vendo por esse lado, nenhum dos meus navegadores incluindo o Chrome e Firefox que estão atualizados seguem essa regra, o unico desatualizado é o IE, e nele também funciona.
    – Raizant
    Commented 15/04/2017 às 16:23
  • 1
    Pelo que eu entendi desse trecho, qualquer valor dentro do disabled altera a condição para verdadeira, na ausência é false ou seja $("#elemento").prop('disabled', ""); também voltaria a habilitar o elemento. Não seria necessário então o removeProp("disabled") correto?
    – Raizant
    Commented 15/04/2017 às 16:35

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 .