Bootstrap强制对带有表单验证的input-group元素进行四舍五入。

huangapple
go评论108阅读模式
英文:

Bootstrap force rounding of input-group element with form validation

问题

我想将Bootstrap 5的input-group与form validation结合起来使用。然而，在验证消息存在时，最后的input-group元素是方形的，而不是圆形的。是否可能强制将其变为圆形？

奖励：是否可能为我的下面示例中的first和last名称提供不同的验证消息？

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. (() => {
  5.   'use strict'
  6.   const forms = document.querySelectorAll('.needs-validation')
  7.   Array.from(forms).forEach(form => {
  8.     form.addEventListener('submit', event => {
  9.       if (!form.checkValidity()) {
  10.         event.preventDefault()
  11.         event.stopPropagation()
  12.       }
  13.       form.classList.add('was-validated')
  14.     }, false)
  15.   })
  16. })()
  18. <!-- language: lang-html -->
  19. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  20. <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>
  22. <div class="container">
  23.   <p/>
  24.   <form class="row g-3 needs-validation" novalidate>
  25.     <div class="col-md-6">
  26.       <div class="input-group">
  27.         <span class="input-group-text">First and last name</span>
  28.         <input type="text" name="first" pattern="^\w{5}$" aria-label="First name" class="form-control" required>
  29.         <input type="text" name="last" pattern="^\w{5}$" aria-label="Last name" class="form-control" required>
  30.         <div class="invalid-feedback">
  31.           upto 5 alphanumeric char only
  32.         </div>
  33.       </div>
  34.     </div>
  35.     <div class="col-12">
  36.       <button class="btn btn-primary" type="submit">Submit form</button>
  37.     </div>
  38.   </form>
  39. </div>
  41. <!-- 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 -->

  1. (() =&gt; {
  2.   &#39;use strict&#39;
  3.   const forms = document.querySelectorAll(&#39;.needs-validation&#39;)
  4.   Array.from(forms).forEach(form =&gt; {
  5.     form.addEventListener(&#39;submit&#39;, event =&gt; {
  6.       if (!form.checkValidity()) {
  7.         event.preventDefault()
  8.         event.stopPropagation()
  9.       }
  10.       form.classList.add(&#39;was-validated&#39;)
  11.     }, false)
  12.   })
  13. })()

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM&quot; crossorigin=&quot;anonymous&quot;&gt;
  2. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  4. &lt;div class=&quot;container&quot;&gt;
  5.   &lt;p/&gt;
  6.   &lt;form class=&quot;row g-3 needs-validation&quot; novalidate&gt;
  7.     &lt;div class=&quot;col-md-6&quot;&gt;
  8.       &lt;div class=&quot;input-group&quot;&gt;
  9.         &lt;span class=&quot;input-group-text&quot;&gt;First and last name&lt;/span&gt;
  10.         &lt;input type=&quot;text&quot; name=&quot;first&quot; pattern=&quot;^\w{5}$&quot; aria-label=&quot;First name&quot; class=&quot;form-control&quot; required&gt;
  11.         &lt;input type=&quot;text&quot; name=&quot;last&quot; pattern=&quot;^\w{5}$&quot; aria-label=&quot;Last name&quot; class=&quot;form-control&quot; required&gt;
  12.         &lt;div class=&quot;invalid-feedback&quot;&gt;
  13.           upto 5 alphanumeric char only
  14.         &lt;/div&gt;
  15.       &lt;/div&gt;
  16.     &lt;/div&gt;
  17.     &lt;div class=&quot;col-12&quot;&gt;
  18.       &lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Submit form&lt;/button&gt;
  19.     &lt;/div&gt;
  20.   &lt;/form&gt;
  21. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

你需要将.input-group类的<div>元素添加.has-validation类。

为了修复边框半径问题，输入组需要额外的.has-validation类。

  1. <div class="input-group has-validation">
  1. 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 -->

  1. (() =&gt; {
  2.   &#39;use strict&#39;
  3.   const forms = document.querySelectorAll(&#39;.needs-validation&#39;)
  4.   Array.from(forms).forEach(form =&gt; {
  5.     form.addEventListener(&#39;submit&#39;, event =&gt; {
  6.       if (!form.checkValidity()) {
  7.         event.preventDefault()
  8.         event.stopPropagation()
  9.       }
  10.       form.classList.add(&#39;was-validated&#39;)
  11.     }, false)
  12.   })
  13. })()

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM&quot; crossorigin=&quot;anonymous&quot;&gt;
  2. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  4. &lt;div class=&quot;container&quot;&gt;
  5.   &lt;br/&gt;
  6.   &lt;form class=&quot;row g-3 needs-validation&quot; novalidate&gt;
  7.     &lt;div class=&quot;col-md-6&quot;&gt;
  8.       &lt;div class=&quot;input-group has-validation&quot;&gt;
  9.         &lt;span class=&quot;input-group-text&quot;&gt;First and last name&lt;/span&gt;
  10.         &lt;input type=&quot;text&quot; name=&quot;first&quot; pattern=&quot;^\w{5}$&quot; aria-label=&quot;First name&quot; class=&quot;form-control&quot; required&gt;
  11.         &lt;input type=&quot;text&quot; name=&quot;last&quot; pattern=&quot;^\w{5}$&quot; aria-label=&quot;Last name&quot; class=&quot;form-control&quot; required&gt;
  12.         &lt;div class=&quot;invalid-feedback&quot;&gt;
  13.           upto 5 alphanumeric char only
  14.         &lt;/div&gt;
  15.       &lt;/div&gt;
  16.     &lt;/div&gt;
  17.     &lt;div class=&quot;col-12&quot;&gt;
  18.       &lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Submit form&lt;/button&gt;
  19.     &lt;/div&gt;
  20.   &lt;/form&gt;
  21. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月13日 13:03:06
  • 转载请务必保留本文链接：https://go.coder-hub.com/76676075.html
  • bootstrap-5
  • css
  • forms
  • html
  • validation
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定