javascript - 如何验证 Materializecss 单选按钮？

Question

我尝试实现验证以在单选按钮上显示错误消息，但未能成功。

我正在使用 Materializecss 框架。

验证/显示错误消息适用于文本框元素，而不适用于单选按钮。

代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
  
  <form>
  <div class="row">
    <div class="input-field col s6">
      <input class="validate" type="radio" name="mode" value="M" id="m" required="required" data-error="Error msg here">
      <label for="m">M</label>
    </div>
    <div class="input-field col s6">
      <input class="validate" type="radio" name="mode" value="F" id="f" required="required" data-error="Error msg here">
      <label for="f">F</label>
    </div>
    <div class="col s12" style="margin-top:20px">
    <button type="submit" class="waves-effect waves-green btn">
    Submit
    </button>
    </div>
  </div>
</form>

为什么不显示错误消息。任何帮助，将不胜感激。谢谢。

Answer 1

如果你会使用 jQuery，你可以实现一个基于 this fiddle 的解决方案.

通过将单选按钮组放置在类为 radioRequired 的容器 div 中:

<div class="col s12 radioRequired" name="mode" data-error="Error msg here">

JQuery 可用于检查是否有选定的单选按钮具有容器中指定的名称。如果没有，则突出显示该 div 并添加带有 radioWarning 类的错误消息和基于容器中 data-error 设置的文本。如果已做出选择，请删除突出显示和错误消息。

单选按钮可以指定为:

  <input type="radio" name="mode" value="M" id="m">
  <label for="m">M</label>

最后，如果有radioWarning，阻止默认的 Submit Action ，否则照常允许它。