Как проверить мою форму MaterializeCSS, и если выбрано первое значение в select - не отправлять форму и отображать ошибку?

Question

Я сделал следующую форму с MaterializeCSS:

<form action="num.php" method="GET" autocomplete="off">
<select id="num" name="num" class="browser-default">
<option selected="true" disabled selected>Select number 
</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</select>
<button class="btn" type="submit">Show
<i class="material-icons right">send</i>
</button>
</form>

Проблема в том, что пользователь может нажать на кнопку, не выбирая номер.Но мне нужно, чтобы он сначала выбрал значение из выбора, и только потом нажимал кнопку.А если он нажал кнопку, не выбрав номер (когда выбрано «Выбрать номер:»), отобразится ошибка и не отправлять форму.Как это можно сделать с помощью JavaScript?

Answer 1

нет необходимости в JS.Вы можете добавить атрибут required, чтобы выбрать и установить значение выбора номера на ""

<form action="num.php" onsubmit="return checkForm()"  method="GET" autocomplete="off">
<select required id="num" name="num" class="browser-default">
<option selected="true" value=""  disabled selected>Select number 
</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</select>
<button class="btn" id="btn" type="submit">Show
<i class="material-icons right">send</i>
</button>
</form>

Answer 2

Получить ссылку на форму и перехватить событие onsubmit

document.getElementsByTagName('form')[0].onsubmit = function() {

//check here the value and return false to stop the submit

if(document.getElementById('num').value == "")
   return false

}