Message to user by not selecting size and color with select

Question

I need to change a script I have and I’m having some difficulty, I need to give a Alert for the user if he tries to go to the cart without selecting the option of Tamanho and Cor, the event even works, but always falls in the first message, the size.

This is the form:

$(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>

Answer 1

Change the selectors of ifs to check if an option has been selected that is not the first:

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

and

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

You don’t have to use input[type='select'], suffice select[name=NOME].

Example:

$(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>