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

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

我正在使用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>

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

最佳答案

如果可以使用jQuery，则可以实现基于this 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>

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

关于javascript - 如何验证Materializecss单选按钮？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42761045/