Não mostrar o formulário se o javascript não estiver ativo<noscript></noscript>

[carecazn]

     Boa tarde, eu tenho um formulário de contato com a validação em javascript, porém, se o usuário estiver com o javascript desativado estou apresentando uma mensagem usando as tag's 

<noscript class="no-script text-center">
  <p class="">Por favor ative o javascript do seu navegador para enviar este formulário!</p>
</noscript>

e quero saber como eu fação para quando estiver desativado o javascript apresentar o formulário desativo.

 

     Não tenho nenhum conhecimento na programação javascript então neste caso vou precisar que desenhe como se faz, rsrsrsrs

[DiF]

@carecazn Estive pensando nesse noscript. Ele é uma mão na roda quando você quer informar que o javascript está desabilitado, porém não serve para bloquear o formulário.

 

Com base nisso fiz algumas pesquisas e testes e resolvi da seguinte maneira:

 

Você define o formulário por padrão desabilitado. E através do javascript você habilita o formulário. Então com isso..ele só vai funcionar SE e Somente SE o javascript estiver habilitado!

 

É uma solução bem simples e não requer gambiarra!

Você pode simplesmente desabilitar todo o formulário ou somente o botão de enviar.. aí fica a seu critério. Em todo o caso vou postar a solução completa que desabilita todo o formulário.

 

Exemplo:

 

HTML

<form action="#" method="post">
  <input type="text" class="campos" name="nome" placeholder="Nome" disabled/>
  <input type="text" class="campos" name="email" placeholder="E-mail" disabled/>
  <input type="text" class="campos" name="sugestoes" placeholder="sugestoes" disabled/>
  <input type="submit" id="submit"  value="Mandar" disabled/> 	
</form>

Perceba que em todos os campos ele é definido como padrão "disabled" 

 

Com javascript vamos habilita-lo usando o jQuery:

Importe o jquery do jeito que quiser primeiro. eu particularmente uso o CDN do google

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Com o jQuery importado o código é bem simples:

 

$(document).ready(function(){
    $("#submit").prop("disabled",!$("#submit").prop("disabled"));
    $(".campos").prop("disabled",!$(".campos").prop("disabled"));
});

Basicamente estamos desabilitando o botão de enviar e os campos SE o javascript for desabilitado.

Caso esteja habilitado ele permite que envie o formulário.

 

PS: é uma solução simples e elegante!

 

[carecazn]

3 horas atrás, DiF disse:

@carecazn Estive pensando nesse noscript. Ele é uma mão na roda quando você quer informar que o javascript está desabilitado, porém não serve para bloquear o formulário.

 

Com base nisso fiz algumas pesquisas e testes e resolvi da seguinte maneira:

 

Você define o formulário por padrão desabilitado. E através do javascript você habilita o formulário. Então com isso..ele só vai funcionar SE e Somente SE o javascript estiver habilitado!

 

É uma solução bem simples e não requer gambiarra!

Você pode simplesmente desabilitar todo o formulário ou somente o botão de enviar.. aí fica a seu critério. Em todo o caso vou postar a solução completa que desabilita todo o formulário.

 

Exemplo:

 

HTML

<form action="#" method="post">
  <input type="text" class="campos" name="nome" placeholder="Nome" disabled/>
  <input type="text" class="campos" name="email" placeholder="E-mail" disabled/>
  <input type="text" class="campos" name="sugestoes" placeholder="sugestoes" disabled/>
  <input type="submit" id="submit"  value="Mandar" disabled/> 	
</form>

Perceba que em todos os campos ele é definido como padrão "disabled" 

 

Com javascript vamos habilita-lo usando o jQuery:

Importe o jquery do jeito que quiser primeiro. eu particularmente uso o CDN do google

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Com o jQuery importado o código é bem simples:

 

$(document).ready(function(){
    $("#submit").prop("disabled",!$("#submit").prop("disabled"));
    $(".campos").prop("disabled",!$(".campos").prop("disabled"));
});

Basicamente estamos desabilitando o botão de enviar e os campos SE o javascript for desabilitado.

Caso esteja habilitado ele permite que envie o formulário.

 

PS: é uma solução simples e elegante!

 

 

     Rsrsrsrsrsrs, PS: é uma solução simples e elegante!, foi a melhor, rsrsrsrsrsrs, vou implementar com certeza, muito obrigado!!

 

     Tenho uma 200 aulas de jQuery, logo logo vou estudar para melhorar meus projetos.

[carecazn]

Bom dia @DiF, melhora um pouco pra mim por favor, vou fazer o seguinte, uma class="formAtivo" e outra class="formDes", então, vou deixar a formDes como padrão e o javascript ativa o formAtivo, pode ser?

[DiF]

@carecazn Não entendi o pedido...   Eu praticamente dei "mastigado" ali em cima rsrs.

 

Não precisa criar duas classes para ativo e desabilitado.

Você vai desabilitar o formulário via INLINE

 

exemplo:

<input type="text" class="campos" name="nome" placeholder="Nome" disabled/>

Veja que tem o disabled no final.  O class="campos" só usei um nome genérico para unificar tudo, pois class permite ser usada mais de uma vez em outros elementos. então a class "campos" seria para manipular todos os campos do seu formulário.

 

Já o id="submit"  é um identificador único, só para o botão de submit.

O código jQuery é só aquilo ali mesmo. a primeira linha habilita o botão submit e a segunda linha habilita o resto dos campos.

Mas ela é opcional, pois você pode só desabilitar o botão de submit..  Mas lembre-se de que ainda existe o enter para enviar o formulário.. então melhor deixar todos os campos desabilitados mesmo sem chance de o usuário escrever algo ou enviar o form.

[carecazn]

     Boa noite, @DiF, neste caso é bom fazer com as classes, pois, já vou aprendendo a trabalhar com o jQuery.

 

Fiz assim,

<script>
$(document).ready(function() {
$('#removeClass').removeClass('formDes').addClass('formAtivo');
});
</script>
<input id="removeClass" class="formDes" type="text" name="nome" placeholder="* Nome"/>
<input id="removeClass" class="formDes" type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" placeholder="* Email"/>
<input id="removeClass" class="formDes" type="tel" autocomplete="off" name="fone-fixo" pattern=".{14,14}" maxlength="14" onkeypress="mascara(this,fixo)" placeholder="* Telefone fixo"/>
<input id="removeClass" class="formDes" type="tel" autocomplete="off" name="fone-cel" maxlength="15" onkeypress="mascara(this,telefone)" placeholder="Telefone Celular" />
<input id="removeClass" class="formDes" type="text" name="assunto" placeholder="* Assunto"/>
<textarea id="removeClass" class="formDes" name="mensagem" rows="3" placeholder="* Mensagem"></textarea>

<input id="removeClass" class="formDes" type="submit" class="btn" name="envia" value="Enviar Contato" />

Neste caso ele removeu apenas a classe do Name

No css fiz assim,

.formDes {pointer-events:none;outline:none;text-indent:-1px;}
.formAtivo{pointer-events:inherit;}

Funcionou Perfeitamente a não ser por este pequeno problema, removeu a classe formDes e atribuiu a classe formAtivo apenas no campo Nome.

 

Mesmo eu colocando o mesmo id para todos os campos.

[DiF]

@carecazn

24 minutos atrás, carecazn disse:

...este pequeno problema, removeu a classe formDes e atribuiu a classe formAtivo apenas no campo Nome.

Aconteceu o erro porque você atribuiu o ID do campo nome  para o resto dos outros inputs.

 

Somente o class pode ser usado mais de uma vez.

Faça assim:

<input class="removeClass formDes" type="text" name="nome" placeholder="* Nome"/>
<input class="removeClass formDes" type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" placeholder="* Email"/>
<input class="removeClass formDes" type="tel" autocomplete="off" name="fone-fixo" pattern=".{14,14}" maxlength="14" onkeypress="mascara(this,fixo)" placeholder="* Telefone fixo"/>
<input class="removeClass formDes" type="tel" autocomplete="off" name="fone-cel" maxlength="15" onkeypress="mascara(this,telefone)" placeholder="Telefone Celular" />
<input class="removeClass formDes" type="text" name="assunto" placeholder="* Assunto"/>
<textarea class="removeClass formDes" name="mensagem" rows="3" placeholder="* Mensagem"></textarea>

<input class="removeClass formDes" type="submit" class="btn" name="envia" value="Enviar Contato" />

jQuery

$(document).ready(function() {
	$('.removeClass').removeClass('formDes').addClass('formAtivo');
});

Desta forma ele aplica a classe formAtivo em todos os campos que contenham a class removeClass

[carecazn]

4 horas atrás, DiF disse:

@carecazn

Aconteceu o erro porque você atribuiu o ID do campo nome  para o resto dos outros inputs.

 

Somente o class pode ser usado mais de uma vez.

Faça assim:

<input class="removeClass formDes" type="text" name="nome" placeholder="* Nome"/>
<input class="removeClass formDes" type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" placeholder="* Email"/>
<input class="removeClass formDes" type="tel" autocomplete="off" name="fone-fixo" pattern=".{14,14}" maxlength="14" onkeypress="mascara(this,fixo)" placeholder="* Telefone fixo"/>
<input class="removeClass formDes" type="tel" autocomplete="off" name="fone-cel" maxlength="15" onkeypress="mascara(this,telefone)" placeholder="Telefone Celular" />
<input class="removeClass formDes" type="text" name="assunto" placeholder="* Assunto"/>
<textarea class="removeClass formDes" name="mensagem" rows="3" placeholder="* Mensagem"></textarea>

<input class="removeClass formDes" type="submit" class="btn" name="envia" value="Enviar Contato" />

jQuery

$(document).ready(function() {
	$('.removeClass').removeClass('formDes').addClass('formAtivo');
});

Desta forma ele aplica a classe formAtivo em todos os campos que contenham a class removeClass

 

     Funcionou perfeitamente!!

 

     Desativo o javascript, aparece a mensagem do 

<noscript class="no-script text-center">
  <p class="">Por favor ative o javascript do seu navegador para enviar este formulário!</p>
</noscript>

     E desativa os inputs e o textarea, ficou muito bacana!! 

adicionado 0 minutos depois

agora, carecazn disse:

 

     Funcionou perfeitamente!!

 

     Desativo o javascript, aparece a mensagem do 

<noscript class="no-script text-center">
  <p class="">Por favor ative o javascript do seu navegador para enviar este formulário!</p>
</noscript>

     E desativa os inputs e o textarea, ficou muito bacana!! 

     Muito obrigado!!