<form class="needs-validation" novalidate>
    <div class="mb-3">
        <label for="firstName" class="form-label">First Name *</label>
        <input type="text" class="form-control" id="firstName" required>
        <div class="invalid-feedback">
            Please provide a valid first name.
        </div>
        <div class="valid-feedback">
            Looks good!
        </div>
    </div>
    
    <div class="mb-3">
        <label for="email" class="form-label">Email Address *</label>
        <input type="email" class="form-control" id="email" required>
        <div class="invalid-feedback">
            Please provide a valid email address.
        </div>
        <div class="valid-feedback">
            Looks good!
        </div>
    </div>
    
    <button class="btn btn-primary" type="submit">Submit Form</button>
</form>

<!-- Password with Pattern -->
<div class="mb-3">
    <label for="password" class="form-label">Password *</label>
    <input type="password" class="form-control" id="password" required 
           minlength="8" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]">
    <div class="invalid-feedback">
        Password must be at least 8 characters with uppercase, lowercase, number, and special character.
    </div>
    <div class="valid-feedback">
        Strong password!
    </div>
</div>

<!-- Phone Number with Pattern -->
<div class="mb-3">
    <label for="phone" class="form-label">Phone Number</label>
    <input type="tel" class="form-control" id="phone" 
           pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890">
    <div class="invalid-feedback">
        Please provide a valid phone number (123-456-7890).
    </div>
</div>

<!-- Age with Min/Max -->
<div class="mb-3">
    <label for="age" class="form-label">Age *</label>
    <input type="number" class="form-control" id="age" min="18" max="120" required>
    <div class="invalid-feedback">
        Please provide a valid age between 18 and 120.
    </div>
</div>

<!-- Custom Validation with Icons -->
<div class="mb-3">
    <label for="customName" class="form-label">Full Name *</label>
    <input type="text" class="form-control" id="customName" required>
    <div class="invalid-feedback">
        <i class="material-symbols-rounded me-1">error</i>
        Please enter your full name (first and last name required).
    </div>
    <div class="valid-feedback">
        <i class="material-symbols-rounded me-1">check_circle</i>
        Perfect! Your name looks good.
    </div>
</div>

<!-- Character Count Validation -->
<div class="mb-3">
    <label for="customMessage" class="form-label">Message *</label>
    <textarea class="form-control" id="customMessage" rows="4" required 
              minlength="10" maxlength="500"></textarea>
    <div class="invalid-feedback">
        <i class="material-symbols-rounded me-1">edit_off</i>
        Please enter a message between 10-500 characters.
    </div>
    <div class="valid-feedback">
        <i class="material-symbols-rounded me-1">edit</i>
        Message looks good! <span id="charCount">0</span>/500 characters.
    </div>
</div>

<!-- Floating Label with Validation -->
<div class="floating-label mb-3">
    <input type="email" class="form-control" id="email" placeholder="Enter email address" required>
    <label for="email">Email Address *</label>
    <div class="invalid-feedback">
        <i class="material-symbols-rounded me-1">warning</i>
        Please provide a valid email address.
    </div>
    <div class="valid-feedback">
        <i class="material-symbols-rounded me-1">verified</i>
        Email looks good!
    </div>
</div>

<!-- Textarea with Floating Label -->
<div class="floating-label mb-3">
    <textarea class="form-control" id="message" rows="3" placeholder="Enter your message" required minlength="10" maxlength="500"></textarea>
    <label for="message">Message *</label>
    <div class="invalid-feedback">
        <i class="material-symbols-rounded me-1">edit_off</i>
        Please enter a message between 10-500 characters.
    </div>
    <div class="valid-feedback">
        <i class="material-symbols-rounded me-1">edit</i>
        Message looks good! <span id="charCount">0</span>/500 characters.
    </div>
</div>

<!-- Select with Floating Label -->
<div class="floating-label mb-3">
    <select class="form-select" id="country" required>
        <option value="">Choose your country...</option>
        <option value="US">United States</option>
        <option value="CA">Canada</option>
    </select>
    <label for="country">Country *</label>
    <div class="invalid-feedback">
        <i class="material-symbols-rounded me-1">location_off</i>
        Please select your country.
    </div>
    <div class="valid-feedback">
        <i class="material-symbols-rounded me-1">location_on</i>
        Country selected!
    </div>
</div>

Plugin Features:

• check_circleSmooth label animations on focus/blur
• check_circleWorks with all form elements (input, textarea, select)
• check_circleSeamless integration with Bootstrap validation
• check_circleEnhanced visual feedback for form states
• check_circleAutomatic initialization and cleanup

Installation:

npm install @tkrotoff/bootstrap-floating-label

SCSS Import:

@import '~@tkrotoff/bootstrap-floating-label/src/bootstrap-floating-label.scss';

// Bootstrap form validation
(function() {
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    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);
})();

// Real-time validation
document.getElementById('email').addEventListener('input', function() {
    const email = this.value;
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    
    if (email === '') {
        this.classList.remove('is-valid', 'is-invalid');
    } else if (emailRegex.test(email)) {
        this.classList.remove('is-invalid');
        this.classList.add('is-valid');
    } else {
        this.classList.remove('is-valid');
        this.classList.add('is-invalid');
    }
});