如何验证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，你可以实现基于this fiddle的解决方案。

将单选按钮组放在带有类radioRequired的容器div中：

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

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

单选按钮可以指定为：

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

最后，如果有无线电警报，请阻止默认的提交操作，否则请正常使用。

Answer 2

对materialize.css的快速研究表明，这个框架的样式缺少radio类型输入的正确选择器，请看这个图像：

以下代码包含用于标签的:after选择器的样式。但是，为无线电输入添加选择器似乎并没有解决我的问题。

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

• 创建一个表单验证器函数，它检查无线电值并提醒用户，然后将此函数挂钩到表单的onsubmit事件。
• 将验证器功能附加到提交按钮，这将人工阻止单击按钮并提交表单。

这是一种更清洁的方法。

我想这个框架的开发人员故意排除了无线电通信验证的代码。单选按钮是一个常见的UI元素，它位于单选按钮组中。单选按钮的特定方式是组中只能有一个选定的值，并且必须有一个选定的值。

所以，改变你的M输入：

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

对此：

<input checked required class="validate" type="radio" name="mode" value="M" id="m">

• HTML5不需要特定修饰符的值，如required，disabled，selected，所以我删除了它。
• 删除了未使用的data-error属性。
• 我将修改器移到了开头，所以你可以一目了然地看到它们。
• 我添加了一个checked修饰符，因此无线电组具有默认值。

看起来你正在制作一个性别选择器。只有两种性别，你总是有性别，没有理由没有默认值。在UI / UX设计方面，单选按钮组应始终具有checked元素。如果您愿意，如果用户不想提供此信息，您可以包含第三个选项。

这是您更新的代码段：

<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 checked required class="validate" type="radio" name="mode" value="M" id="m">
      <label for="m">M</label>
    </div>
    <div class="input-field col s6">
      <input required class="validate" type="radio" name="mode" value="F" id="f">
      <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 3

我使用过这个框架，默认情况下与单选按钮表单验证没有任何关系。我使用以下结构来为我的单选按钮添加验证。

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

<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="radio 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="radio 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>

<script>
	$('.radio lable, .radio input').click(function(){$(this).parent().siblings().removeClass('checked'); $(this).parent().addClass("checked")});
	$("form button[type=submit]").click(function(e){
		e.preventDefault();
		$("form input:radio").each(function() {
			  if ($(this).attr('required')){
				if(!$(this).parent().hasClass('checked')){
				  //some code for when nothing is chosen
					console.log("nothing is chosen");
				} else{
				  console.log("value of checked radio button is: "+$(this).val());
				}
			  } else {
				  console.log("not required");
			  }
		});
	});
</script>

我希望它能解决这个问题。

Answer 4

https://jqueryvalidation.org/使用此插件。 Jqueryvalidation。它对我有用。它文档齐全，易于使用。

你放了一些规则，然后从那个插件中调出validate函数。

Answer 5

我正在使用物化为前端和验证按钮无线电使用jquery.validate.js并在更改行

elementID = this.idOrName( elemnt ),为elementID = $( elemnt ).attr("id"),

并评论此行this.addWrapper( errors ).hide();