单选按钮上的无提示验证被忽略，而它只适用于相同表单html中的文本字段

Unobtrusive validation on radio buttons is ignored while it works fine for text fields in same form html only

本文关键字：适用于 表单 html 字段 文本 提示 验证 单选按钮      更新时间：2023-09-26

我正在测试一个具有Unobtrusive验证的表单，它背后没有MVC控制器，html是手工编写的，仅用于测试（找出为什么它不起作用），而不用于生产。

当表单被提交时，单选按钮不会发生任何事情（并没有错误消息，就像并没有任何验证一样），而同一表单中的文本字段会给出正确的验证错误。

我已经扔掉了我能想到的任何东西，这个例子只需要验证器单选按钮和错误消息跨度，什么都没有，它仍然不起作用。

我一定错过了一些显而易见的东西，当有人指出我的错误时，我可能会觉得自己像个白痴，但我不能在这上面花更多的时间。

<form>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.min.js"></script>
  <div class="quote-form__question fl--title">
    <div class="split-input--left">
      <input class="tooltip form-control input " data-val="true" data-val-length="Please enter a firstname with no more than 20 characters" data-val-length-max="20" data-val-regex="Please enter First name with letters only" data-val-regex-pattern="^ *?[a-zA-Z]+[ a-zA-Z-_']*$"
      data-val-required="Please enter your first name" id="CustomerFirstname" maxlength="20" name="CustomerFirstname" placeholder="Name" tabindex="" type="text" value="">
      <div class="field-validation-error-container">
        <span class="field-validation-valid field-validation-error" data-valmsg-for="CustomerFirstname" data-valmsg-replace="true"></span>
      </div>
    </div>
  </div>
  <div class="label-row-full-width">
    <label for="q1-1" class="label--un-checked">
      <span>Mr</span>
      <input type="radio" class="js-check-style js-toggle-question js-show-button" data-val-required="Please select title" name="CustomerTitle" id="q1-1" data-val="Mr" value="Mr">
    </label>
    <label for="q1-2" class="label--un-checked">
      <span>Mrs</span>
      <input type="radio" class="js-check-style js-toggle-question js-show-button" data-val-required="Please select title" name="CustomerTitle" id="q1-2" data-val="Mrs" value="Mrs">
    </label>
    <label for="q1-3" class="label--un-checked">
      <span>Miss</span>
      <input type="radio" class="js-check-style js-toggle-question js-show-button" data-val-required="Please select title" name="CustomerTitle" id="q1-3" data-val="Miss" value="Miss">
    </label>
    <label for="q1-4" class="label--un-checked">
      <span>Ms</span>
      <input type="radio" class="js-check-style js-toggle-question js-show-button" data-val-required="Please select title" name="CustomerTitle" id="q1-4" data-val="Ms" value="Ms">
    </label>
    <span class="field-validation-valid" data-valmsg-for="CustomerTitle" data-valmsg-replace="true"></span>
  </div>
  <input type="submit" value="submit" />
  </div>
</form>

我错过了什么

经过一些调查。

我必须做的是在后端引入自定义验证器属性（我认为这超出了问题的范围，但值得链接）
这就是它归结为仅前端解决方案的原因。

  1. 单选按钮属性data-val-required更改为data-val-something

  2. jquery和验证脚本加载后，注册适配器

    <script type="text/javascript" language="javascript"> $.validator.unobtrusive.adapters.addBool("something", "required"); </script>

以下是工作示例：

<form>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/mvc/5.0/jquery.validate.unobtrusive.min.js"></script>
  <script type="text/javascript" language="javascript">
    $.validator.unobtrusive.adapters.addBool("mandatory", "required");
  </script>
  <div class="label-row-full-width">
    <label for="q1-1" class="label--un-checked">
      <span>Mr</span>
      <input type="radio" class="js-check-style js-toggle-question js-show-button valid" data-val-mandatory="Please select title" name="CustomerTitle" id="q1-1" data-val="true" value="Mr">
    </label>
    <label for="q1-2" class="label--un-checked">
      <span>Mrs</span>
      <input type="radio" class="js-check-style js-toggle-question js-show-button valid" data-val-mandatory="Please select title" name="CustomerTitle" id="q1-2" data-val="true" value="Mrs">
    </label>
    <label for="q1-3" class="label--checked">
      <span>Miss</span>
      <input type="radio" class="js-check-style js-toggle-question js-show-button valid" data-val-mandatory="Please select title" name="CustomerTitle" id="q1-3" data-val="true" value="Miss">
    </label>
    <label for="q1-4" class="label--un-checked">
      <span>Ms</span>
      <input type="radio" class="js-check-style js-toggle-question js-show-button valid" data-val-mandatory="Please select title" name="CustomerTitle" id="q1-4" data-val="true" value="Ms">
    </label>
    <span class="field-validation-valid" data-valmsg-for="CustomerTitle" data-valmsg-replace="true"></span>
  </div>
  <input type="submit" value="submit" />
</form>

希望这能帮你节省一些时间。

相关文章：