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实施解决方案。

将单选按钮组放在容器div中，类 radioRequired ：

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

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

单选按钮可以指定为：

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

最后，如果有 radioWarning ，请阻止默认的提交操作，否则请正常使用。

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设计方面，单选按钮组应始终具有已选中的元素。如果您愿意，如果用户不想提供此信息，则可能包含第三个选项。< / p>

这是您更新的代码段：

＆＃13;

<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>

＆＃13;

Answer 3

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

我添加了一个班级名称＆＃34; radio＆＃34;在关闭body标签之前输入父母和脚本。

＆＃13;

<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>

＆＃13;

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

Answer 4

https://jqueryvalidation.org/ 使用此插件。 Jqueryvalidation。它对我有用。它有详细记录且易于使用。

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

Answer 5

我正在使用物化作为前端，并使用jquery.validate.js来验证单选按钮，并在更改行中

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

并对此行this.addWrapper( errors ).hide();

进行评论

如何验证Materialisecss单选按钮？

5 个答案: