Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
carcleo

CSS Validação CSS em campo oculto

Recommended Posts

Pessoal, estou com uma situação muito difícil e gostaria da ajuda de vocês:

 

Tenho 3 rádio buttons que guardam opções de cartão para pagamento para o cliente escolher.

No entanto, para não apresentar apenas os rádio buttons ao navegante do site, escondi os radio buttons com display:none e coloquei um botão bonito no lugar para ser marcado de forma tal que ao clicar nesse botão, que é feito através de um label, o rádio button também é marcado.

 

Mas como é um formulário, gostaria de validar, preferencialmente com css, se alguma opção foi selecionada, caso contrario, forçar o require do html.

    <ul class="pagamento-metodos">
      <li class="pagamento-metodo paypal">
        <input name="payment_methods" type="radio" id="paypal" value="paypal" required>
        <label for="paypal"></label>
      </li>
      <li class="pagamento-metodo pagseguro">
        <input name="payment_methods" type="radio" id="pagseguro" value="pagseguro">
        <label for="pagseguro"></label>
      </li>
      <li class="pagamento-metodo boleto">
        <input name="payment_methods" type="radio" id="boleto" value="boleto">
        <label for="boleto"></label>
      </li>
    </ul>

Quando submeto o formulário, e não seleciono nenhuma opção de pagamento, o require não funciona porque o  o input está com display:none e a validação passa para o próximo campo.

input[type=radio] {
    display:none;
}

.pagamento-metodos {
    width: 500px;
    height: 120px;
    text-align: center;
    border: rgb(222,222,222) 1px solid;
}
.pagamento-metodos .pagamento-metodo {
    display: inline-block;
}
.pagamento-metodo + .pagamento-metodo {
    margin-left: 25px;
    margin-top: 19px;
}
.pagamento-metodos .pagamento-metodo label {
    position: relative;
    display: block;
    width: 130px;
    height: 80px;
    border: rgb(222,222,222) 1px solid;
    cursor:pointer;
}
.pagamento-metodos .pagamento-metodo label:after {
    display: none;
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    background: url(../_imgs/checked.png) no-repeat center;
}
.pagamento-metodos .pagamento-metodo input[type=radio]:checked + label {
    outline: rgb(33,180,208) 4px solid;
}
.pagamento-metodos .pagamento-metodo input[type=radio]:checked + label:after {
    display: block;
}
.pagamento-metodos .paypal label {
    background: url(../_imgs/payPal.png) no-repeat center;
}
.pagamento-metodos .pagseguro label {
    background: url(../_imgs/pagSeguro.png) no-repeat center;
}
.pagamento-metodos .boleto label {
    background: url(../_imgs/boleto.png) no-repeat center;
}

Algum recurso?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Desconheco como fazer a validação pelo Css;; acredito que isso tenha que ser feito via javascript... 

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • Autor do tópico
  • Como ficaria em JavaScript?

    Ou ainda fazer o require do HTML funcionar com o input com display:none?

    Editado por carcleo

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @carcleo Não tem como fazer validação por CSS.

     

    Mas tente trocar o display none por  visibility: hidden;

     

    A explicação é simples: Ao definir display none, além de esconder o elemento, o navegador passa a entender que ele "não existe" e outros elementos podem ocupar o espaço dele.

    Quando se define a visibilidade como hidden, você deixa o elemento invisível mas ainda ocupando o espaço. com isso você pode tentar validar.

     

    Dito isso, porque você não usa o CSS3 para estilizar o seus radio buttons?

    https://nandovieira.com.br/usando-css3-para-formatar-radio-buttons

     

    O exemplo que o cara faz ali é exatamente com opções de pagamento que você esta fazendo.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Valeu, obrigado pela explicação detalhada.

    Aproveitando o tópico e não saindo muito do assunto,

    Quando fazemos visibility:hidden e precisamos ocupar o espaço de digamos desta vez, um radio button com seu label correspondente, fazemos width e height = 0. Mas quando fazemos require, pelo fato das dimensões serem 0, o aviso do require não aparece e passa ao próximo campo do formulário.

     

    Alguma forma de contornar esse problema?

    Editado por carcleo

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @carcleo

    3 horas atrás, carcleo disse:

    Alguma forma de contornar esse problema?

    Sim,  usando o exemplo do site que postei acima.

     

    Na verdade, os radio button não ficam invisíveis, você só esconde a parte dele, mas na teoria ele permanece aqui.

     

    Veja esse exemplo que fiz  baseado no site acima:  https://jsfiddle.net/dife/wLu8gdho/4/

    Claro que ali é só um exemplo você precisa implementar... mas desta forma funciona..

     

    O pulo do gato ali, é que você deve inserir o require apenas no primeiro radio button!

    Desconsidere toda a parte do jQuery(javascript) aquilo só coloquei para você ver o que acontece.

     

    Ali aquele IF, ele testa se o valor for "undefined" ou seja, quando estiver vazio, ele mostra uma mensagem de erro, se estiver com valor, ele mostra em um alert o value do radio button.  

    Bem lembre que isso é só para fins de teste. então o javascript não deve ser considerado.

    Afinal, você vai validar os radio button e os outros campos, via PHP.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Valeu, era isso mesmo que eu precisava.

    Vou adaptar aqui ao meu código para sempre ter.

    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Então, adequei teu código ao meu e ficou assim:

    * {
    	margin: 0;
    	padding: 0;
    }
    body {
    	margin: 0 auto;
    	width: 1000px;
    }
    .pagamento-metodos {
    	list-style: none;
    	display: block;
    	border: rgb(222,222,222) 1px solid;
    	width: 500px;
    	height: 120px;
    }
    .pagamento-metodos .pagamento-metodo {
    	position: relative;
    	border: rgb(222,222,222) 1px solid;
    	box-sizing: border-box;
    	float: left;
    	width: 130px;
    	height: 80px;
    	margin-top: 19px;
    }
    .pagamento-metodos > .pagamento-metodo {
    	margin-left: 25px;
    }
    .pagamento-metodos .pagamento-metodo + .pagamento-metodo {
    	margin-left: 25px;
    }
    .pagamento-metodos .pagamento-metodo label {
    	position: absolute;
    	display: block;
    	cursor: pointer;
    	font-size: 0;
    	bottom: 1px;
    	left: 1px;
    	right: 1px;
    	top: 1px;
    }
    .pagamento-metodos .pagamento-metodo label:after {
    	content: "";
    	clear: both;
    }
    .pagamento-metodos .pagamento-metodo input[type=radio] {
    	position:absolute;
    	left:5px;
    	top: 5px;
    }
    .pagamento-metodos .pagamento-metodo input[type=radio]:focus + label {
    	outline: 2px dotted #21b4d0;
    }
    .pagamento-metodos .pagamento-metodo input[type=radio]:checked + label {
    	outline: 4px solid #21b4d0;
    }
    .pagamento-metodos .pagamento-metodo input[type=radio]:checked + label:after {
    	display: inline-block;
    	position: absolute;
    	width: 20px;
    	height: 20px;
    	right: 0;
    	bottom: 0;
    	background: url(_imgs/checked.png) center;
    	background-size: cover;
    }
    .pagamento-metodos .pagseguro label {
    	background: url(_imgs/pagSeguro.png) center;
    	background-size: cover;
    }
    .pagamento-metodos .paypal label {
    	background: url(_imgs/payPal.png) center;
    	background-size: cover;
    }
    .pagamento-metodos .boleto label {
    	background: url(_imgs/boleto.png) center;
    	background-size: cover;
    }

     

    <form action="#" method="post">
      <ul class="pagamento-metodos">
        <li class="pagamento-metodo paypal">
          <input name="payment_methods" class="pagamento" type="radio" id="paypal" value="paypal" required/>
          <label for="paypal">PayPal</label>
        </li>
        <li class="pagamento-metodo pagseguro">
          <input name="payment_methods" class="pagamento" type="radio" id="pagseguro" value="pagseguro"/>
          <label for="pagseguro">PagSeguro</label>
        </li>
        <li class="pagamento-metodo boleto">
          <input name="payment_methods" class="pagamento" type="radio" id="boleto" value="boleto_bancario"/>
          <label for="boleto">Boleto</label>
        </li>
      </ul>
      <br />
      <input type="submit" value="testar" class="btn" />
    </form>

    Mas, vendo a imagem abaixo,

    erro.thumb.png.f459c915803730cbd89687c9b7f7d07a.png

    dá para notar que o radio button está aparecendo uma pontinha dele no canto superior esquerdo das li's

     

    Como suprimir essa falha?

    Editado por carcleo

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @carcleo Não é falha.  é como eu falei antes.  Ele de fato fica ali.  Não tem como "esconder".

    Visível ele só fica se for inspecionar o elemento como você fez.

    Mas na prática ele não fica aparecendo, mas ele precisa existir ali, se não não funciona.

     

     

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Tem jeito sim, consegui:

    opacity:0; 

    Muito obrigado pelo código que abriu a minha mente.

    Editado por carcleo
    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @carcleo Depois de pesquisar mais sobre a sua dúvida, descobri um meio mais elegante do que usar o opacity.

     

    Veja bem, ao usar o opacity, você esconde a bolinha do radio button, mas ao mesmo tempo vai esconder outras coisas, caso  por exemplo tenha uma regra para o before e after. Muito comum usado os icon-fonts para substituir a bolinha do radio button. ou seja uma customização.

     

    Neste caso, a solução mais indicada é usar o atributo visibility e setar para hidden.

     

    desta maneira:

     

    <input type="radio" name="escolha" class="radio"/>Biscoito
    <input type="radio" name="escolha" class="radio"/>Bolacha
    
    
    input[type=radio].radio{
    	 visibility:hidden;
    }

    desta forma você só deixa escondido a bolinha!  Para complementar, junte com um label para poder clicar nas palavras  e checkar o radio button! :thumbsup:

    Editado por DiF

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Então, eu já havia tentado assim antes, mas o campo associado é required, e, com visibilidade nula (visibility:hidden;), por incrível que pareça, está impossibilitando o validator do html5 de encontrar o input.

     

    Então assim o validator do html5 pula a validação para o próximo campo do formulário.

    • Curtir 1

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @carcleo Nesse caso, você faz a validação via  jQuery para sobrescrever a do HTML5 !

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Sim, mas eu não gostaria de usar jQuery validator nesse projeto.

     

    Alguma implicação grave em continuar assim?


     

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @carcleo Nenhuma. mas você não precisa usar especificamente o jQuery validator.

    Podes apenas pegar o valor do radio button e comparar com um valor nulo ou vazio. 

     

    Podes usar este exemplo para implementar no seu projeto: https://jsfiddle.net/dife/ngL4vu7a/1/

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Crie uma conta ou entre para comentar

    Você precisar ser um membro para fazer um comentário






    Sobre o Clube do Hardware

    No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

    Direitos autorais

    Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

    ×