CSS Validação CSS em campo oculto

[carcleo]

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?

[bngomes]

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

[carcleo]

Como ficaria em JavaScript?

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

[DiF]

@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.

[carcleo]

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?

[DiF]

@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.

[carcleo]

Valeu, era isso mesmo que eu precisava.

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

[carcleo]

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,

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

 

Como suprimir essa falha?

[DiF]

@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.

 

 

[carcleo]

Tem jeito sim, consegui:

opacity:0; 

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

[DiF]

@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! 

[carcleo]

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.

[DiF]

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

[carcleo]

Sim, mas eu não gostaria de usar jQuery validator nesse projeto.

 

Alguma implicação grave em continuar assim?

 

[DiF]

@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/