How to prompt the message when I didn't select? - css

Question

when I didn't set the product size, it will show the text "Must pick 1 size for the product". But it can't show the text. I want to know how to use select and input Element?
<select name="product_size" class="form-control" required oninput="setCustomValidity('')"
oninvalid="setCustomValidity('Must pick 1 size for the product')">
<option disabled selected>Select a Size</option>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
enter image description here

Answer 1

Welcome to StackOverflow!
There are a two things wrong with your code.
The oninvalid callback was never able to be executed, as nothing ever checked for the validity of the select element. You can fix this by wrapping it in a form element and have a <button> in it. When this button gets clicked by a user, the form gets validated by the browser, will see, that the select is invalid and call your oninvalid code.
It is never invalid in chrome. I have tested your code and it worked perfectly on Firefox after wrapping it with a form. Chrome however does not think your default option is invalid to make it think this I added the value="" attribute to it.
A working example:
<form action="javascript:void()">
<select
required
name="product_size"
class="form-control"
oninput="setCustomValidity('')"
oninvalid="setCustomValidity('Must pick 1 size for the product')"
>
<option value="" disabled selected>Select a Size</option>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
<button type="submit">Submit</button>
</form>