英文:
Bootstrap force rounding of input-group element with form validation
问题
我想将Bootstrap 5的input-group与form validation结合起来使用。然而，在验证消息存在时，最后的input-group元素是方形的，而不是圆形的。是否可能强制将其变为圆形？
奖励：是否可能为我的下面示例中的first和last名称提供不同的验证消息？
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
(() => {
'use strict'
const forms = document.querySelectorAll('.needs-validation')
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<div class="container">
<p/>
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-6">
<div class="input-group">
<span class="input-group-text">First and last name</span>
<input type="text" name="first" pattern="^\w{5}$" aria-label="First name" class="form-control" required>
<input type="text" name="last" pattern="^\w{5}$" aria-label="Last name" class="form-control" required>
<div class="invalid-feedback">
upto 5 alphanumeric char only
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
</div>
<!-- end snippet -->
英文:
I would like to combine Bootstrap 5's input-group with form validation. However, the last input-group element is squared and not rounded when validation message is present. Is it possible to force round it?
Bonus: is it possible to provide a different validation message for first & last name in my example below?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
(() => {
'use strict'
const forms = document.querySelectorAll('.needs-validation')
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<div class="container">
<p/>
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-6">
<div class="input-group">
<span class="input-group-text">First and last name</span>
<input type="text" name="first" pattern="^\w{5}$" aria-label="First name" class="form-control" required>
<input type="text" name="last" pattern="^\w{5}$" aria-label="Last name" class="form-control" required>
<div class="invalid-feedback">
upto 5 alphanumeric char only
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
</div>
<!-- end snippet -->
答案1
得分: 1
你需要将.input-group类的<div>元素添加.has-validation类。
为了修复边框半径问题，输入组需要额外的
.has-validation类。
<div class="input-group has-validation">
form.classList.add('was-validated')
英文:
You need to add the .has-validation class to the div with the .input-group class.
> To fix issues with border radius, input groups require an additional .has-validation class.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
(() => {
'use strict'
const forms = document.querySelectorAll('.needs-validation')
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<div class="container">
<br/>
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-6">
<div class="input-group has-validation">
<span class="input-group-text">First and last name</span>
<input type="text" name="first" pattern="^\w{5}$" aria-label="First name" class="form-control" required>
<input type="text" name="last" pattern="^\w{5}$" aria-label="Last name" class="form-control" required>
<div class="invalid-feedback">
upto 5 alphanumeric char only
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论