物化CSS在提交时验证所有表单字段

Question

我有一个用MaterializeCSS库构建的基本表单。表单具有一些必填字段，如下所示（不是我的代码，但可以完美显示问题）：

https://codepen.io/zzzian/pen/LZbrOP

<div class="row">
<form class="col s12">
<div class="row">
  <div class="input-field col s12">
    <input id="email2" type="email" class="validate" required="" aria-required="true">
    <label for="email2">Email</label>
  </div>
  <div class="input-field col s12">
    <input id="example" name="example" type="text" class="validate" required="" aria-required="true">
    <label for="example">Field</label>
  </div>
  <div class="input-field col s12">
    <select required="" aria-required="true">
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
        <label>Materialize Select</label>
      </div>
      <div class="input-field col s12">
        <button class="btn waves-effect waves-light" type="submit" name="action">Submit</button>
      </div>
    </div>
</form>
</div>

请注意，当单击“提交”时，仅显示第一无效字段。

我认为这真的是一个糟糕的UX，因为它可能使用户不得不执行多个Enter-> Submit-> Correct循环，直到正确填写所有表单字段为止。

我想要的是突出显示 ALL 无效字段。这使用户可以立即纠正所有错误，然后提交。

这可能吗？

谢谢。