21

Digamos que eu tenha um formulário com os campos de 1 à 7.

Algo como:

field-1
field-2
field-3
field-4
field-5
field-6
field-7

Todos esses campos estão em um formulário.

Com o Laravel, algumas vezes eu experimentei situações de quando eu desabilito um campo com a propriedade disabled, eu não fui capaz de recuperá-lo através do array Input. Assim, para evitar diretamente esse problema eu gostaria de saber se há, e se houver, como, uma forma de bloquear, via JS/jQuery, que um campo seja editado no formulário. PORÉM, apenas saberei disso (se ele deve ser desabilitado ou não) em tempo de execução.

Ex.: De acordo com o valor do campo field-2 eu posso precisar desativar os campos field-3, field-4 e field-5 para edição, mas ainda precisarei dos seus valores no array INPUT, que serão atribuídos para ter o mesmo valor do field-2, nesse caso.

Não sei se consegui ser claro, mas qualquer dúvida perguntem nos comentários!

2 Respostas 2

11

O navegador não envia campos desabilitados com disabled na submissão do formulário, por isso sua primeira tentativa não funcionou.

Por outro lado, você não precisa usar script para impedir a alteração de um campo. Ao invés disso, use o atributo readonly.

Efeitos colaterais:

  • O usuário poderá, entretanto, clicar e selecionar o conteúdo do campo.

  • Além disso, os estilos do campo permanecerão os originais, isto é, o usuário poderá não perceber que se trata de um campo somente-leitura. Nesse caso, adicione um estilo para manter a usabilidade, por exemplo, deixando o fundo da caixa um pouco acinzentado.

Exemplo:

<input type="text" value="Valor fixo" 
    style="background: #EEE; cursor: not-allowed; color: #777" readonly />

Exemplo de classe CSS para reuso:

.desabilitado {
    background: #EEE; 
    cursor: not-allowed; 
    color: #777;
}

Dessa forma você pode manter o feedback visual para o usuário.

Veja o exemplo funcional do código acima no jsfiddle.

Considerações de segurança

Alguém pode argumentar que desabilitar campos na tela não é uma boa prática do ponto de vista de Segurança da Informação, pois hoje um usuário pode facilmente burlar essa limitação através da Ferramenta do Desenvolvedor (F12), alterando as propriedades do campo. Isso está correto, em parte.

O importante é entender que a necessidade de desabilitar campos é parte essencial do funcionamento dos sistemas. Não é seu objetivo garantir a segurança da informação daquele campo.

Este artigo tem por objetivo auxiliar o desenvolvedor front-end com um elemento puramente visual e não isenta as validações necessárias no back-end.

2
  • Excelente resposta. Muito obrigado! Commented 3/02/2014 às 14:40
  • 4
    Mas é importante ressaltar que se o usuário tem conhecimento básico de Javascript utilizando o console do navegador o usuário poderá alterar seu campo e enviar junto ao Form. Commented 3/02/2014 às 15:21
3

Quando disabled é usado em um <input type=text> por exemplo, esse campo não pode ser resgatado pelo $_POST/$_GET. O adequado é usar o atributo readonly, isso garante que o campo seja acessível pelo php, e no HTML ele não poderá ser editado.

<input type="text" id="nome" name="nome" readonly="readonly"  />

Um exemplo utilizando js puro:

    <html>
    <head>
        <script type="text/javascript">
            function bloquearInput(){
                var input = document.getElementById('nome');
    
                if(input.readOnly){
                    input.readOnly = false;
                }else{
                    input.readOnly = true;
                }
    
            }
        </script>
    </head>
    <body>
    <form>
        <input type="text" id="nome" name="nome"  value="sem edição"/>
        <input type="button" onclick="bloquearInput();" value="bloquear/desbloquear">
    </form>
    </body>
    </html>

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 .