Question

我发现了复选框的语义UI验证问题，并说明我已经创建了此JSFiddle。这是标记：

<form class="ui form segment">
  <p>Tell Us About Checkboxes</p>
  <div class="inline fields">
    <label>How often do you use checkboxes?</label>
    <div class="field">
      <div class="ui radio">
        <input type="radio" name="frequency">
        <label>Once a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio">
        <input type="radio" name="frequency">
        <label>2-3 times a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio">
        <input type="radio" name="frequency">
        <label>Once a day</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio">
        <input type="radio" name="frequency">
        <label>Twice a day</label>
      </div>
    </div>
  </div>
  <div class="ui blue submit button">Submit</div>
</form>

这是验证：

$(function() {
  $(".ui.checkbox").checkbox();
  $('.ui.form').form({
      "inline": true,
      "on": "blur",
      "fields": {
        "frequency": {
          "identifier": 'frequency',
          "rules": [{
            "type": 'checked',
            "prompt": 'Please select when you use checkboxes'
          }]
        }
      }
    });
});

基本上我需要验证是否已经检查了一个复选框（出于某种原因，JSFiddle最初都检查了它们？？）并且当有人点击第一个收音机但是如果你尝试击中除第一个之外的收音机，它不会删除错误。任何人都知道发生了什么？

Answer 1

更新

从Semantic UI 2.0.4更新到2.1.8 / latest可以解决所有问题。

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js">
</script>

工作示例：https://jsfiddle.net/hnz6ks45/1/

此问题在Semantic UI项目的GitHub存储库中似乎是open issue。 history issues https://jsfiddle.net/bnugf1d3/可以追溯到一年左右。

在开发人员解决问题之前，我建议您默认选中其中一个无线电（ checked="checked" ），因为这似乎可以解决问题。

示例：(see docs example)

另外，我建议你将每个<div class="ui radio">修改为<div class="ui radio checkbox">，即在每个div上包含“ui radio”类的“复选框”类，以便他们从Semantic UI的自定义样式中受益{{ 3}}

最后，为了便于访问，我建议为每个标签添加for属性。另外一个优点是，您的用户可以通过单击无线电附近的文本来操作复选框/无线电，而不仅仅是无线电本身，这些数据相当小，需要更高的精度，因此更多的人认为是点击。这意味着我会在每个id元素中添加input，如下所示：

<div class="required inline fields">
    <label>How often do you use checkboxes?</label>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" id="freq_1" name="frequency" checked="checked">
        <label for="freq_1">Once a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" id="freq_2" name="frequency">
        <label for="freq_2">2-3 times a week</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" id="freq_3" name="frequency">
        <label for="freq_3">Once a day</label>
      </div>
    </div>
    <div class="field">
      <div class="ui radio checkbox">
        <input type="radio" id="freq_4" name="frequency">
        <label for="freq_4">Twice a day</label>
      </div>
    </div>
  </div>

语义UI复选框验证

1 个答案:

更新