gpt4 book ai didi

javascript - 多个 Bootstrap 卡片的表单验证

转载 作者:太空宇宙 更新时间:2023-11-04 07:41:52 25 4
gpt4 key购买 nike

我正在使用 Bootstrap 4 和 jQuery。目前我有一张表格,里面有两张(或更多)BS 卡。每张卡都包含应添加的客户数据字段。

我已经集成了一个自定义验证,但目前我被卡住了。我不仅希望颜色显示有效和无效字段。我还想在卡片的标题中有一个小图标,其中包含无效的表单字段。

在我的 CodePen 示例中,您可以看到图标已经出现。但如前所述,只有在该卡片中存在错误(无效字段)时才会出现这种情况。

<i class="fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>

$(document).ready(function () {

window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('custom-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();



}
form.classList.add('was-validated');
}, false);
});
}, false);

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/ee71fca9e3.js"></script>
<form id="testForm" action="#" method="post" class="custom-validation" novalidate>

<div class="row p-3">

<!-- Card 1 -->
<div class="col-6 mb-2">

<div class="card pax-details">
<div class="card-header card-header-primary d-flex justify-content-between">
<span>Customer 1</span>
<span>
<i class="fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<div class="card-body card-body-secondary collapse show">

<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">First Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="First name" required />
</div>
</div>
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">Last Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="Last name" required />
</div>
</div>

</div>
</div>

</div>

<!-- Card 2 -->
<div class="col-6 mb-2">

<div class="card pax-details">
<div class="card-header card-header-primary d-flex justify-content-between">
<span>Customer 2</span>
<span>
<i class="fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<div class="card-body card-body-secondary collapse show">

<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">First Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="First name" required />
</div>
</div>
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">Last Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="Last name" required />
</div>
</div>

</div>
</div>

</div>

</div>

<div class="row px-3">
<div class="col">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>

</form>

如何解决?这里的每张卡都需要额外的表格吗?

代码笔:https://codepen.io/SchweizerSchoggi/pen/OzevKy

最佳答案

观察

  • 我添加了一个类隐藏。
  • 我已经为每张卡添加了 ID。
  • 使用这些 ID,我找到了错误元素并删除了类 hide。
  • 我设置 event.preventDefault 只是为了避免发送该表单时出错。

$(document).ready(function() {

window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('custom-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {

event.preventDefault(); // Rebemeber to remove this
event.stopPropagation(); // Rebemeber to remove this
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();

if ($('#card_body_1').find('.form-control:invalid').size() > 0) {
$('#card_body_1').parent().children('.card-header').find('.fa-exclamation-circle').removeClass('hide');
} else {
$('#card_body_1').parent().children('.card-header').find('.fa-exclamation-circle').addClass('hide');
}

if ($('#card_body_2').find('.form-control:invalid').size() > 0) {
$('#card_body_2').parent().children('.card-header').find('.fa-exclamation-circle').removeClass('hide');
} else {
$('#card_body_2').parent().children('.card-header').find('.fa-exclamation-circle').addClass('hide');
}

}
form.classList.add('was-validated');
}, false);
});
}, false);

});
.hide {
display: none !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/ee71fca9e3.js"></script>
<form id="testForm" action="#" method="post" class="custom-validation" novalidate>

<div class="row p-3">

<!-- Card 1 -->
<div class="col-6 mb-2">

<div class="card pax-details">
<div class="card-header card-header-primary d-flex justify-content-between">
<span>Customer 1</span>
<span>
<i class="hide fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<div id='card_body_1' class="card-body card-body-secondary collapse show">

<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">First Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="First name" required />
</div>
</div>
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">Last Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="Last name" required />
</div>
</div>

</div>
</div>

</div>

<!-- Card 2 -->
<div class="col-6 mb-2">

<div class="card pax-details">
<div class="card-header card-header-primary d-flex justify-content-between">
<span>Customer 2</span>
<span>
<i class="hide fa fa-exclamation-circle text-danger mr-1" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
</span>
</div>
<div id='card_body_2' class="card-body card-body-secondary collapse show">

<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">First Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="First name" required />
</div>
</div>
<div class="form-group form-row">
<label for="" class="col-5 col-md-4 col-lg-3 col-xl-2">Last Name*</label>
<div class="col-3 col-md-3 col-lg-2">
<input type="text" class="form-control form-control-sm" id="" placeholder="Last name" required />
</div>
</div>

</div>
</div>

</div>

</div>

<div class="row px-3">
<div class="col">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>

</form>

关于javascript - 多个 Bootstrap 卡片的表单验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48446556/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com