0
I am doing a check on my page so that the user will always be required to select one cor
and a tamanho
but my script is not working properly even by selecting the color and clicking the add button alert
asks me to cor
be selected.
What I have is this, the options of cor
and 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>
Applying borders to color and size options:
.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"); }) })
Checking and giving the 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 } }); });
I’m using hasclass
to check if the edges are being applied, but it did not work very well.
The page can be seen here: Access the example page
Is that a form? Why don’t you use Buttons? so your application is accessible and semantic, and you do not need to keep checking the classes, have an ex here: https://codepen.io/rauldronca/pen/EWLeMz
– Vinicius Cainelli