如何在单选按钮上调用欧芹方法答案

【问题标题】：How to call parsley methods on radio buttons如何在单选按钮上调用欧芹方法
【发布时间】：2019-07-06 11:28:18
【问题描述】：

我有一个多步骤表单，目前使用欧芹进行验证。单击下一个按钮时对表单元素执行验证。由于某些奇怪的原因，验证单选按钮已成为一个大问题。

const firstName = $("#pi_fname").parsley();
firstName.isValid() // returns true or false depending on validation rules

const question1 = $("input[type='radio'][name='question1']").parsley();
question1.isValid() // produces Uncaught TypeError: question1.isValid is not a function

HTML

<div class="col-sm-12">            
              <div class="form-check">
                <input class="form-check-input" type="radio" name="question1" id="exampleRadios11" value="1"
                  data-required="true">
                <label class="form-check-label" for="exampleRadios11">
                  Strongly disagree
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="question1" id="exampleRadios12" value="2">
                <label class="form-check-label" for="exampleRadios12">
                  Disagree
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="question1" id="exampleRadios13" value="3">
                <label class="form-check-label" for="exampleRadios13">
                  Neutral
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="question1" id="exampleRadios14" value="4">
                <label class="form-check-label" for="exampleRadios14">
                  Agree
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="question1" id="exampleRadios15" value="5">
                <label class="form-check-label" for="exampleRadios15">
                  Strongly agree
                </label>
              </div>
          </div>

欧芹的文档说

当做 $('#target').parsley() 或 new Parsley('#target');在一个元素（或 , ），它将绑定字段并返回 ParsleyField 实例。输入类型除外没有具有名称属性或 data-parsley-multiple 属性，它们不会被绑定（忽略）并且最终会在控制台中发出警告。

但是单选按钮有一个名称属性。那么为什么会失败呢？请帮忙！！！

【问题讨论】：

标签： javascript parsley.js

【解决方案1】：

$("input[type='radio'][name='question1']") 返回一个包含多个元素的 jQuery 集合。对它调用 .parsley() 将返回 Parsley 对象数组，而不是您期望的 Parsley 元素。

您应该致电.first().parsley().isValid() 或.parsley()[0].isValid()。当然，第一个元素没有什么特别之处，isValid 的结果对于任何无线电都是一样的。

【讨论】：