Form validation icon doesn't appear when using input group together.

[DJNoblesse]

When using input group and form validation(with icon). form validation is work fine. but, icon doesn't appear right position. (hide back to the button...)

am I write HTML source wrong? or it is a bug?

Demo Screen (Without Hide Button) Demo Screen (With Hide Button)

Here is a source code.

<form>
  <div class="form-group validation validation-icons valid">
    <label class="form-label" for="serialNumber">Serial Number</label>
    <div class="input-group">
      <input class="input" id="serialNumber" placeholder="시리얼 번호 입력" />
      <span class="input-addon-btn">
        <button id="launchQRScanner" class="btn green"><span class="alert-icon"><i class="petalicon petalicon-camera"></i></span></button>
      </span>
    </div>
    <p id="serialNumberNotice" class="form-caption">오른쪽의 버튼을 눌러 QR코드를 스캔할 수 있습니다.</p>
  </div>
</form>

Demo Page : https://devhaus.ikstudio.net/blobs/webview (form validation status will be always valid on this page.)

[zvuc]

This is because validation icons calculate position relative to the direct parent input-group. Using both input-addon-btn along with validation requires nesting input-groups inside input-group like this:

<form>
  <div class="form-group validation validation-icons error">
    <label class="form-label" for="serialNumber">Serial Number</label>
    <div class="input-group">
      <div class="input-group">
        <input class="input" id="serialNumber" placeholder="시리얼 번호 입력" />
      </div>
      <span class="input-addon-btn">
        <button id="launchQRScanner" class="btn green"><span class="alert-icon"><i class="petalicon petalicon-camera"></i></span></button>
      </span>
    </div>
    <p id="serialNumberNotice" class="form-caption">오른쪽의 버튼을 눌러 QR코드를 스캔할 수 있습니다.</p>
  </div>
</form>

However, when I originally implemented validation styles for form-groups, I didn't expect a case where input-groups would be nested like above. So you will need to add an additional line of CSS to override validation icon appearing twice:

.form-group.validation.validation-icons > .input-group:after {
    display: none
}

Demo page: https://codepen.io/zvuc/pen/OjZWVK

I will try to think of a better way to fix the code / documentation to make this work for all cases without breaking existing implementation.

[zvuc]

Fixed with d81720aeec7510da08164bfd872b2bab54e3cf80, Released in 0.10.0