1

Estou precisando alterar um script que tenho e estou tendo alguma dificuldade, preciso dar um Alert para o usuário se ele tentar ir para o carrinho sem selecionar a opção de Tamanho e Cor, o evento até funciona, mas sempre cai na primeira mensagem, a do tamanho.

O formulário é esse:

$(document).ready(function () {
    $('#Finaliza').click(function () {
        if (!$("input[type='select'][name='Tamanho']").is(':selected')) {
            jAlert("TAMANHO\nPor favor, selecione o tamanho para o modelo.");
            //alert("COR\nPor favor, selecione a cor para o modelo.");
            return false;
        } else if (!$("input[type='select'][name='Cor']").is(':selected')) {
            jAlert("COR\nPor favor, selecione a cor para o modelo.");
            //alert("TAMANHO\nPor favor, selecione o tamanho para o modelo.");
            return false;
        } else {
            var $cod = $("#cod").val();
			var $categoria = $("#categoria").val();
			var $tam = $("input[name='Tamanho']:selected").val();
			var $cor = $("input[name='Cor']:selected").val();					
        }
    });
});
<form action="#" class="row variable">
	<div class="col-sm-6">
		<div class="form-group selectpicker-wrapper">
			<label for="Tamanho">Size</label>
			<select name="Tamanho" class="selectpicker input-price" data-live-search="true" data-width="100%" data-toggle="tooltip" title="Select">
				<option>TAMANHO</option>
				<?php foreach ($ResTamanho as $ResTamanhoSel) { ?>
				<option value="<?php echo $ResTamanhoSel->IdTamanho ?>"><?php echo $ResTamanhoSel->Nome; ?></option>
				<?php } ?>
			</select>
		</div>
	</div>
	<div class="col-sm-6">
		<div class="form-group selectpicker-wrapper">
			<label for="Cor">Color</label>
			<select name="Cor" class="selectpicker input-price" data-live-search="true" data-width="100%" data-toggle="tooltip" title="Select">
				<option>COR</option>
				<?php foreach ($ResCor as $ResCorSel) { ?>
				<option value="<?php echo $ResCorSel->IdCor ?>"><?php echo $ResCorSel->NomeCor; ?></option>
				<?php } ?>
			</select>
		</div>
	</div>
</form>

<div class="buttons">
<button class="btn btn-theme btn-cart btn-icon-left" type="submit" id="Finaliza"><i class="fa fa-shopping-cart"></i>CARRINHO</button>
</div>

1 Resposta 1

1

Altere os seletores dos ifs para verificar se algum option foi selecionado que não seja o primeiro:

!$("select[name='Tamanho'] option").not(":first").is(":selected")

e

!$("select[name='Cor'] option").not(":first").is(":selected")

Não precisa usar input[type='select'], basta select[name=NOME].

Exemplo:

$(document).ready(function () {
    $('#Finaliza').click(function () {
        if (!$("select[name='Tamanho'] option").not(":first").is(":selected")) {
            alert("TAMANHO\nPor favor, selecione o tamanho para o modelo.");
            return false;
        } else if (!$("select[name='Cor'] option").not(":first").is(":selected")) {
            alert("COR\nPor favor, selecione a cor para o modelo.");
            return false;
        } else {
            alert("ok");
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" class="row variable">
	<div class="col-sm-6">
		<div class="form-group selectpicker-wrapper">
			<label for="Tamanho">Size</label>
			<select name="Tamanho" class="selectpicker input-price" data-live-search="true" data-width="100%" data-toggle="tooltip" title="Select">
				<option>TAMANHO</option>
				<option value="1">32</option>
			</select>
		</div>
	</div>
	<div class="col-sm-6">
		<div class="form-group selectpicker-wrapper">
			<label for="Cor">Color</label>
			<select name="Cor" class="selectpicker input-price" data-live-search="true" data-width="100%" data-toggle="tooltip" title="Select">
				<option>COR</option>
				<option value="1">Verde</option>
			</select>
		</div>
	</div>
</form>
<div class="buttons">
<button class="btn btn-theme btn-cart btn-icon-left" type="submit" id="Finaliza"><i class="fa fa-shopping-cart"></i>CARRINHO</button>
</div>

1
  • Valeu pela ajuda e explicação @sam. Commented 26/09/2018 às 15:03

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 .