Невозможно проверить bootstrap 4 нестандартного радио с Петрушкой. js - PullRequest
Новая
       54

Невозможно проверить bootstrap 4 нестандартного радио с Петрушкой. js

0 голосов
/ 13 февраля 2020

Я использую петрушку для проверки моей формы <input>, <select>, и она прекрасно работает, но когда я работаю с <input type="radio">, у меня возникают некоторые проблемы. Вот как я получаю свой вывод. Как вы можете видеть, другие две опции не перечислены в text-invalid.

enter image description here

Как показано на рисунке, другие две опции не выделены 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>

con Кто-нибудь, помогите мне решить эту проблему, Как сделать, чтобы другие два варианта были выделены с помощью text-invalid or text-danger

1 Ответ

1 голос
/ 16 февраля 2020

Поскольку входной код заключен в отдельные 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>
...