Drop down select required

[Sergio999]

I have  drop down select required  and i need a value to be selected par customer at check out 

this is my code

<p class="cart-attribute__field">
<strong style="color: red;">Veuillez spécifier la SAQ désignée pour la cueillette de votre commande</strong></label><br>
<select required class="required" id="note" name="attributes[note]">
<option value="">—-Sélectionner la SAQ désignée ici—-</option>
<option value="33507 - Saint-Augustin-de-Desmaures"{% if cart.attributes["note"] == "33507 - Saint-Augustin-de-Desmaures" %} selected{% endif %}>33507 - Saint-Augustin-de-Desmaures</option>
<option value="33596 - Vanier"{% if cart.attributes["note"] == "33596 - Vanier" %} selected{% endif %}>33596 - Vanier</option>
<option value="33585 - Carrefour Charlesbourg"{% if cart.attributes["note"] == "33585 - Carrefour Charlesbourg" %} selected{% endif %}>33585 - Carrefour Charlesbourg</option>
<option value="33584 - Les Saules"{% if cart.attributes["note"] == "33584 - Les Saules" %} selected{% endif %}>33584 - Les Saules</option>

</select>
</p>

When customer press check out button, it does not do the validation when no value

why ? what i need to add ?

tks

[Guleria]

Hello @Sergio999 ,

On cart page it will never work in this way. 

I suggest to write a custom JS function which will first check your select value. If it finds value then return true so default checkout functionality ill work else prevent checkout button to perform its action and shoe alert or custom message with select box.

Thanks

[Sergio999]

hi 

i found this but does not work

<script>
jQuery(function() {
jQuery('body').on('click', '[name="checkout"], [name="goto_pp"], [name="goto_gc"]', function() {
var formIsValid = true;
var message = "Please fill this out and you will be able to check out.";
jQuery('[name="attributes"], [name="note"]').filter('.required, [required="required"]').each(function() {
jQuery(this).removeClass('error');
if (formIsValid && jQuery(this).val() == '') {
formIsValid = false;
message = jQuery(this).attr('data-error') || message;
jQuery(this).addClass('error');
}
});
if (formIsValid){
jQuery(this).submit();
}
else {
alert(message);
return false;
}
});
});
</script>

[Sergio999]

Hi

 i am not an expert in JS

somebody can help me on what would be the script to be able to validate if the field is empty and trigger error message

would really appreciate . And wont need  to manage customers  with empty field

tks