Question

我有一个多步骤表单，目前正在使用香菜进行验证。单击下一个按钮时，将对表单元素执行验证。出于某些奇怪的原因，验证单选按钮原来是一个巨大的问题。

JS

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>

Parsley的文档说

在执行$（'＃target'）。parsley（）或新的Parsley（'＃target'）时；在一个元素（或，），它将绑定字段并返回一个ParsleyField实例。输入类型除外不具有名称属性或 data-parsley-multiple属性，它们不会被绑定（忽略），并且最终将在控制台中发出警告。

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

Answer 1

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

您应该致电.first().parsley().isValid()或.parsley()[0].isValid()。当然，第一个元素没有什么特别的，isValid的结果对于任何收音机来说都是相同的。

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

1 个答案: