无法使用 Parsley.js 验证 bootstrap 4 custom-radio

Question

我使用欧芹来验证我的表单 <input>, <select> 并且效果很好，但是当我使用 <input type="radio"> 时我遇到了一些问题。这就是我得到输出的方式。如您所见，text-invalid 未列出其他两个选项。

如图所示，其他两个选项没有用text-invalid 突出显示。我什至在其他两个无线电输入中添加了required，但没有任何效果。

这是我的代码：快速演示

$(document).ready(function() {
  $("#adform").parsley({
    errorClass: "is-invalid text-danger",
    successClass: "is-valid",
    errorsWrapper: '<div class="form-group"></div>',
    errorTemplate: '<small class="form-text text-danger"></small>'
  }).on("form:submit", function() {
    $("#submiting").modal("show"), $(".st").css("display", "none")
  })
}), $(".selectpicker").attr("data-trigger", "change").attr("data-required", "true");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.1/parsley.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<form id="adform" role="form" method="post" action="" enctype="multipart/form-data" autocomplete="off" data-parsley-validate>
  <label class="text-black-50">Fuel Type<b class="text-danger ml-1">*</b></label>
  <div class="col-12 mb-3">
    <span class="border p-2 shadow-sm rounded">
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" id="diesel" name="fue" class="custom-control-input" value="Diesel" required data-parsley-error-message="Select fuel type" data-parsley-errors-container="#fuelerr">
            <label class="custom-control-label" for="diesel">Diesel</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" id="petrol" name="fue" class="custom-control-input" value="Petrol">
            <label class="custom-control-label" for="petrol">Petrol</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" id="hybrid" name="fue" class="custom-control-input" value="Hybrid">
            <label class="custom-control-label" for="hybrid">Hybrid</label>
        </div>
    </span>
    <div id="fuelerr" class="pt-2"></div>
  </div>
  <input type="submit" name="submit" value="Submit Ad" />
</form>

有人帮我解决这个问题，我如何使用text-invalid or text-danger 突出显示其他两个选项

Answer 1

由于输入代码是用单独的 div 包装的，所以错误类没有被应用，所以你需要像下面那样制作 classLoader。

classHandler: function (el) {
        return el.$element.closest('.fuel-type');
    }

并将燃料类型类添加到

<span class="border p-2 shadow-sm rounded fuel-type">

查看以下演示，希望对您有所帮助。

$(document).ready(function() {
  $("#adform").parsley({
    errorClass: "is-invalid text-danger",
    successClass: "is-valid",
    classHandler: function (el) {
        return el.$element.closest('.fuel-type');
    },
    errorsWrapper: '<div class="form-group"></div>',
    errorTemplate: '<small class="form-text text-danger"></small>'
  }).on("form:submit", function() {
    $("#submiting").modal("show"), $(".st").css("display", "none")
  })
}), $(".selectpicker").attr("data-trigger", "change").attr("data-required", "true");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.1/parsley.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<form id="adform" role="form" method="post" action="" enctype="multipart/form-data" autocomplete="off" data-parsley-validate>
  <label class="text-black-50">Fuel Type<b class="text-danger ml-1">*</b></label>
  <div class="col-12 mb-3">
    <span class="border p-2 shadow-sm rounded fuel-type">
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" id="diesel" name="fue" class="custom-control-input" value="Diesel" required data-parsley-error-message="Select fuel type" data-parsley-errors-container="#fuelerr">
            <label class="custom-control-label" for="diesel">Diesel</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" id="petrol" name="fue" class="custom-control-input" value="Petrol">
            <label class="custom-control-label" for="petrol">Petrol</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" id="hybrid" name="fue" class="custom-control-input" value="Hybrid">
            <label class="custom-control-label" for="hybrid">Hybrid</label>
        </div>
    </span>
    <div id="fuelerr" class="pt-2"></div>
  </div>
  <input type="submit" name="submit" value="Submit Ad" />
</form>