Check if edge is applied

Asked

Viewed 40 times

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

jquery css jalert
  • 1

    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

2 answers

2


In your code you are checking if the button has the class "selBordaCor", but you are adding in "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.

  • The part you saw is just the initial rendered element, it adds further down the class exactly as you posted.

  • but the code it checks is wrong so it will always call the Alert, I do not see the reason for negative?

  • Hello @Lucas, how this check needs to be correct?

  • You’re right, I had understood that I was checking the class "divCor"

  • puts $(". divCor"). hasClass("selBordaCor") in place of $(this). hasClass("selBordaCor")

  • You can post an answer, so it is easier to understand and if it works out I already accept the same.

  • I’ll edit here

  • It wouldn’t just work with !$(".divCor").hasClass("selBordaCor") because the class selector brings an array of elements, you need to iterate on each one, using the .each for example

  • I don’t think it makes more sense to hang around here. It’s just comments and it’s already too long. anything sends an pm. In the context of his html it would work because he only has one element with that class. if he has more agree that he would have to use each.

  • 'Cause he owns a forEach, in the example link creates some more divCor. But if it marked as solved is because it guided you to the solution, then all right.

Show 5 more comments

0

You are checking the class in 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 the selection of colors and size, has the specific class.

Thus:

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

Browser other questions tagged jquery css jalert

You are not signed in. Login or sign up in order to post.