Javascript 如何验证ECSS单选按钮？

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

我正在使用

materialiecss

框架

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

代码：

M
F
提交

对

materialize.css

的快速研究表明，此框架的样式缺少用于输入类型

radio

的适当选择器，请查看此图像：

以下代码包含标签选择器的

：after

样式。然而，为无线电输入添加选择器似乎并不能解决我的问题

要解决您的问题，您可以选择：

• 制作一个表单验证程序函数，用于检查无线电值并提醒用户，然后将此函数挂接到表单的

  onsubmit

  事件
• 将验证器功能附加到提交按钮，这将人为地阻止按钮被单击和表单被提交

这里有一个更干净的方法。

我猜这个框架的开发人员故意排除了radiobutton验证的代码。 单选按钮是一个常见的UI元素，它以单选按钮组的形式出现。单选按钮在某种程度上是特定的，一个组中只能有一个选定值，并且必须有一个选定值

因此，从以下内容更改M输入：

<input class="validate" type="radio" name="mode" value="M" id="m" required="required" data-error="Error msg here">

---

如果您可以使用jQuery，就可以实现基于的解决方案

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

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

单选按钮可以指定为：

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

M

---

最后，如果存在radioWarnings，请阻止默认提交操作，否则允许它正常进行。

我使用过此框架，默认情况下与单选按钮表单验证无关。为了给单选按钮添加验证，我使用了以下结构

在关闭body标记之前，我添加了一个类名“radio”来输入父类和一个脚本

M
F
提交
$（'.radio lable，.radio input'）。单击（function（）{$（this）.parent（）.sides（）.removeClass（'checked'）；$（this.parent（）.addClass（'checked'））；
$（“表单按钮[type=submit]”）。单击（函数（e）{
e、 预防默认值（）；
$（“表单输入：收音机”）。每个（函数（）{
if（$（this.attr（'required'））{
if（！$（this.parent（）.hasClass（'checked'））{
//没有选择任何内容时的一些代码
console.log（“未选择任何内容”）；
}否则{
log（“选中单选按钮的值为：+$（this.val（））；
}
}否则{
控制台日志（“不需要”）；
}
});
});

使用这个插件。Jquery验证。这对我有用。它有很好的文档记录并且易于使用

---

您可以设置一些规则，然后从该插件调用validate函数。

我将materializes用于前端，要验证按钮，请使用jquery.validate.js单选并在更改行中

elementID=this.idOrName（elemnt），
elementID=$（elemnt）.attr（“id”），

并在这行上注释
this.addWrapper（errors.hide（）
我认为框架不支持单选按钮的验证（至少消息：错误/正确）。radiogroup中的单选按钮可以不选择=>Submit按钮不执行任何操作。或者选择了单选按钮=>您没有任何消息，因为选择已完成。虽然预选单选按钮“很好”，但这可能表明单选按钮不适合选择您的性别。也许复选框是更好的选择。如果还有任何问题，请告诉我
<div class="col s12 radioRequired" name="mode" data-error="Error msg here">

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