代码之家 › 专栏 › 技术社区 › sanoj lawrence

无法验证带欧芹的bootstrap 4自定义收音机。js

parsley.js bootstrap-4 html

0

sanoj lawrence · 技术社区 · 6 年前

我用欧芹来验证我的表格 <input>, <select> 而且效果很好,但当我和 <input type="radio"> 我有些问题。这就是我获得输出的方式。如您所见,其他两个选项没有列出 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

0 回复 | 直到 6 年前

1

Allabakash 6 年前

因为输入代码是用单独的div包装的,所以不会应用错误类,所以您需要像下面这样使用类加载器。

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>