If drop down not selected show error message

Question

How to show error message if dropdown option not picked. when click next and message should appear please see the below picture.

Answer 1

If you are doing it on frontend then why you didn't validate the form before submit here is an example

<select id="select-gender" form="myForm" name="radios">
  <option id="opt-default" form="myForm" value="" selected> Please Select </option>
  <option id="sexmale" name="radios" value="Male" form="myForm"> Male </option>
  <option id="sexfemale" name="radios" value="Female" form="myForm"> Female </option>
</select>


<button onclick="validateForm()">Submit</button>
<form name="myForm" id="myForm" onsubmit="return validateForm()" method="post">
</form>

Javascript Code

//Error Msg for input field
function validateForm() {

  let gender = document.forms["myForm"]["radios"].value;

  if (gender == "") {

    //You can use soft messenging using Jquery as well
    alert("Please select your Gender");
    return false;

  }
}