Verify if border is applied

Question

Verify if border is applied

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

I'm doing a check on my page so that the user is always required to select a cor and a tamanho but my script is not working correctly, even selecting the color and clicking the add alert asks me to cor be selected.

What I have is this, the options for 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 the borders in the 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");              
        })      
    })

Doing the check 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 borders are being applied, but it did not work.

The page can be seen here: Access the sample page

jquery css jalert

asked by anonymous 21.08.2018 / 15:40

2 answers

0

You are checking the class on the wrong element.

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

What you should do is check if any child of the element that encompasses color selection and size has the specific class.

So:

$('#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!');
    }
});

21.08.2018 / 16:31

How to Automatically Name a CONSTRAINT Manually Created in SQLServer 2016 Method that works without calling you directly

score 2 · Accepted Answer

In your code you are checking if the button has the class "selBordaCor", but you are adding it to "divCor". Change this part of the code:

$(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 } }); }); To:
$(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 } }); }); See if it works.