如何验证Materialisecss单选按钮？

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，您可以基于此 fiddle实现一个解决方案。

通过将单选按钮组放置在具有radioRequired类的容器 div 中：

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

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

单选按钮可以指定为：

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

最后，如果有radioWarning，请阻止默认的 Submit 操作，否则允许它正常进行。