如何验证我的 MaterializeCSS 表单，如果第一个值在 select selected - 不发送表单并显示错误？

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>

问题是用户可以单击按钮，而不 select输入数字。但我需要他先从 select 中选择一个值，然后才按下一个按钮。如果他在没有 select 输入数字的情况下按下按钮（当 "Select number:" selected 时），则显示错误并且不发送表单。如何使用 JavaScript 完成此操作？

Answer 1

获取表单引用并拦截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

}

Answer 2

不需要js。您可以将 required 属性添加到 select 并将 Select 数字的值设置为 ""

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

如何验证我的 MaterializeCSS 表单，如果第一个值在 select selected - 不发送表单并显示错误？

How to validate my MaterializeCSS form, and if first value in select selected - do not send form & display an error?

javascript

forms

validation

materialize