0

Estou fazendo uma verificação em minha página para que o usuário sempre seja obrigado a selecionar uma cor e um tamanho mas o meu script não está funcionando corretamente, mesmo selecionando a cor e clicar no botão adicionar o alert me pede para que a cor seja selecionada.

O que tenho é isso, as opções de cor e tamanho:

<div class="tovar_color_select">
	<p>SELECIONE A COR</p>
	<?php foreach($ResCor as $ProdCor) { ?>
		<a class="divCor" IdCor="<?php echo $ProdCor->IdCor; ?>" style="background-color:<?php echo $ProdCor->Cor ?>;"></a>
	<?php } ?>	
</div>											

<div class="tovar_size_select">									
	<p>SELECIONE O TAMANHO</p>
	<?php foreach($ResTamanho  as $ProdTam) { ?>
		<a class="divTamanho" IdTamanho="<?php echo $ProdTam->IdTamanho; ?>" ><?php echo $ProdTam->Nome; ?></a>
	<?php } ?>
</div>

Aplicando as bordas nas opções de cor e tamanho:

.selBordaCor {
    border: solid 1px #363131 !important;
}

.selBordaTamanho {
    border: solid 1px #363131 !important;
}

    // APLICANDO BORDA PARA COR 
    $(document).ready(function(){
        $(".divCor").on("click", function() {          
          $(".divCor").each(function(){               
            $(this).removeClass("selBordaCor");     
          })
          $(this).addClass("selBordaCor");              
        })      
    })
    // APLICANDO BORDA PARA TAMANHO
    $(document).ready(function(){
        $(".divTamanho").on("click", function() {          
          $(".divTamanho").each(function(){               
            $(this).removeClass("selBordaTamanho");     
          })
          $(this).addClass("selBordaTamanho");              
        })      
    }) 

Fazendo a verificação e dando o alert:

$(document).ready(function () {
    $('#Finalizar').click(function () {
        if (!$(this).hasClass("selBordaCor")) {
            jAlert('COR\nPor favor, selecione a cor para o modelo.', 'Atenção');
            //alert("COR\nPor favor, selecione a cor para o modelo.");
            return false;
        } else if (!$(this).hasClass("selBordaTamanho")) {
            jAlert('TAMANHO\nPor favor, selecione o tamanho para o modelo.', 'Atenção');
                //alert("TAMANHO\nPor favor, selecione o tamanho para o modelo.");
                return false;
            } else {
            // SE TUDO DE CERTO
        }
    });
}); 

Estou usando hasclass para verificar se as bordas estão sendo aplicadas, mas não deu muito certo.

A página pode ser vista aqui: Acessa a página de exemplo

1
  • 1
    Isso é um form? Pq não usa radio buttons? assim sua aplicação fica acessivel e semântica, e você não precisa ficar verificando as classes, tem um ex aqui: codepen.io/rauldronca/pen/EWLeMz Commented 21/08/2018 às 13:52

2 Respostas 2

2

No teu código estas verificando se o botão tem a classe "selBordaCor", porém estas adicionando em "divCor". Altere esta parte do código:

$(document).ready(function () { $('#Finalizar').click(function () { if (!$(this).hasClass("selBordaCor")) { jAlert('COR\nPor favor, selecione a cor para o modelo.', 'Atenção'); //alert("COR\nPor favor, selecione a cor para o modelo."); return false; } else if (!$(this).hasClass("selBordaTamanho")) { jAlert('TAMANHO\nPor favor, selecione o tamanho para o modelo.', 'Atenção'); //alert("TAMANHO\nPor favor, selecione o tamanho para o modelo."); return false; } else { // SE TUDO DE CERTO } }); }); Para:
$(document).ready(function () { $('#Finalizar').click(function () { if (!$(".divCor").hasClass("selBordaCor")) { jAlert('COR\nPor favor, selecione a cor para o modelo.', 'Atenção'); //alert("COR\nPor favor, selecione a cor para o modelo."); return false; } else if (!$(".divCor").hasClass("selBordaTamanho")) { jAlert('TAMANHO\nPor favor, selecione o tamanho para o modelo.', 'Atenção'); //alert("TAMANHO\nPor favor, selecione o tamanho para o modelo."); return false; } else { // SE TUDO DE CERTO } }); }); Veja se funciona.

10
  • A parte que você viu é apenas o elemento renderizado inicial, ele adiciona mais abaixo a classe exatamente como você postou.
    – Marco
    Commented 21/08/2018 às 14:17
  • mas o código que ele verifica está errado por isso sempre vai chamar o alert, não vejo o motivo de negativar?
    – Lucas
    Commented 21/08/2018 às 14:18
  • Olá @Lucas, como precisa ser essa verificação de forma correta? Commented 21/08/2018 às 14:26
  • Tem razão, eu havia entendido que estava verificando a classe "divCor"
    – Marco
    Commented 21/08/2018 às 14:27
  • coloca $(".divCor").hasClass("selBordaCor") no lugar do $(this).hasClass("selBordaCor")
    – Lucas
    Commented 21/08/2018 às 14:28
0

Você está verificando a classe no elemento errado.

$(document).ready(function () {
    $('#Finalizar').click(function () {
        if (!$(this).hasClass("selBordaCor")) { // <-- Aqui você está verificando se o botão Finalizar possue a classe selBordaCor

O que você deve fazer é verificar se algum filho do elemento que engloba a seleção de cores e de tamanho, possui a classe específica.

Assim:

$('#Finalizar').click(function () {
    if ($('.tovar_color_select').find('.selBordaCor').length != 1) {
      alert('Selecione a cor!');
    }

    else if ($('.tovar_size_select').find('.selBordaCor').length != 1) {
      alert('Selecione o tamanho!');
    }
});

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 .