Textarea Validation

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Required Textarea with Validation -->
    <form id="form-required" novalidate class="space-y-2">
      <div class="flex justify-between">
        <label for="required-textarea" class="block text-sm font-medium text-gray-700">Feedback</label>
        <span class="text-xs font-medium text-red-600">*Required</span>
      </div>
      <textarea id="required-textarea" rows="4" placeholder="Please provide your feedback..." required
        class="w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 peer"></textarea>
      <p class="mt-1 invisible peer-invalid:visible text-sm text-red-600" id="required-error">
        This field is required
      </p>
      <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
        Submit Feedback
      </button>
    </form>

    <!-- Minimum Length Validation -->
    <form id="form-min-length" novalidate class="space-y-2">
      <label for="min-length-textarea" class="block text-sm font-medium text-gray-700">Review</label>
      <textarea id="min-length-textarea" rows="4" placeholder="Please provide a detailed review..." minlength="20"
        class="w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
      <p class="mt-1 text-sm text-red-600 hidden" id="min-length-error">
        Please enter at least 20 characters
      </p>
      <div class="flex justify-between items-center">
        <span class="text-xs text-gray-500">Minimum 20 characters</span>
        <span id="min-length-counter" class="text-xs text-gray-500">0/20</span>
      </div>
      <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
        Submit Review
      </button>
    </form>

    <!-- Maximum Word Count Validation -->
    <form id="form-max-words" novalidate class="space-y-2">
      <label for="max-words-textarea" class="block text-sm font-medium text-gray-700">Summary</label>
      <textarea id="max-words-textarea" rows="4" placeholder="Please provide a brief summary (max 50 words)..."
        class="w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
      <p class="mt-1 text-sm text-red-600 hidden" id="max-words-error">
        Please limit your summary to 50 words
      </p>
      <div class="flex justify-between items-center">
        <span class="text-xs text-gray-500">Maximum 50 words</span>
        <span id="word-counter" class="text-xs text-gray-500">0/50 words</span>
      </div>
      <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
        Submit Summary
      </button>
    </form>

    <!-- Pattern Validation (must include specific words) -->
    <form id="form-pattern" novalidate class="space-y-2">
      <label for="pattern-textarea" class="block text-sm font-medium text-gray-700">Job Description</label>
      <textarea id="pattern-textarea" rows="4" placeholder="Describe the job responsibilities..." 
        class="w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
      <p class="mt-1 text-sm text-red-600 hidden" id="pattern-error">
        Please include the words "responsibilities" and "qualifications"
      </p>
      <p class="text-xs text-gray-500">Please include the keywords "responsibilities" and "qualifications" in your description</p>
      <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
        Submit Description
      </button>
    </form>
  </div>

  <script>
    // Required textarea validation
    const formRequired = document.getElementById('form-required');
    const requiredTextarea = document.getElementById('required-textarea');
    const requiredError = document.getElementById('required-error');

    formRequired.addEventListener('submit', function(e) {
      e.preventDefault();
      
      if (!requiredTextarea.value.trim()) {
        requiredTextarea.classList.add('border-red-500');
        requiredError.classList.remove('invisible');
      } else {
        requiredTextarea.classList.remove('border-red-500');
        requiredError.classList.add('invisible');
        alert('Feedback submitted successfully!');
        this.reset();
      }
    });

    // Minimum length validation
    const formMinLength = document.getElementById('form-min-length');
    const minLengthTextarea = document.getElementById('min-length-textarea');
    const minLengthError = document.getElementById('min-length-error');
    const minLengthCounter = document.getElementById('min-length-counter');

    minLengthTextarea.addEventListener('input', function() {
      const currentLength = this.value.length;
      minLengthCounter.textContent = `${currentLength}/20`;
      
      if (currentLength < 20) {
        minLengthError.classList.remove('hidden');
        this.classList.add('border-red-500');
      } else {
        minLengthError.classList.add('hidden');
        this.classList.remove('border-red-500');
      }
    });

    formMinLength.addEventListener('submit', function(e) {
      e.preventDefault();
      
      if (minLengthTextarea.value.length < 20) {
        minLengthTextarea.classList.add('border-red-500');
        minLengthError.classList.remove('hidden');
      } else {
        minLengthTextarea.classList.remove('border-red-500');
        minLengthError.classList.add('hidden');
        alert('Review submitted successfully!');
        this.reset();
        minLengthCounter.textContent = '0/20';
      }
    });

    // Maximum word count validation
    const formMaxWords = document.getElementById('form-max-words');
    const maxWordsTextarea = document.getElementById('max-words-textarea');
    const maxWordsError = document.getElementById('max-words-error');
    const wordCounter = document.getElementById('word-counter');

    function countWords(text) {
      return text.trim().split(/\s+/).filter(Boolean).length;
    }

    maxWordsTextarea.addEventListener('input', function() {
      const wordCount = countWords(this.value);
      wordCounter.textContent = `${wordCount}/50 words`;
      
      if (wordCount > 50) {
        maxWordsError.classList.remove('hidden');
        this.classList.add('border-red-500');
      } else {
        maxWordsError.classList.add('hidden');
        this.classList.remove('border-red-500');
      }
    });

    formMaxWords.addEventListener('submit', function(e) {
      e.preventDefault();
      
      const wordCount = countWords(maxWordsTextarea.value);
      if (wordCount > 50) {
        maxWordsTextarea.classList.add('border-red-500');
        maxWordsError.classList.remove('hidden');
      } else {
        maxWordsTextarea.classList.remove('border-red-500');
        maxWordsError.classList.add('hidden');
        alert('Summary submitted successfully!');
        this.reset();
        wordCounter.textContent = '0/50 words';
      }
    });

    // Pattern validation
    const formPattern = document.getElementById('form-pattern');
    const patternTextarea = document.getElementById('pattern-textarea');
    const patternError = document.getElementById('pattern-error');

    formPattern.addEventListener('submit', function(e) {
      e.preventDefault();
      
      const text = patternTextarea.value.toLowerCase();
      if (!text.includes('responsibilities') || !text.includes('qualifications')) {
        patternTextarea.classList.add('border-red-500');
        patternError.classList.remove('hidden');
      } else {
        patternTextarea.classList.remove('border-red-500');
        patternError.classList.add('hidden');
        alert('Job description submitted successfully!');
        this.reset();
      }
    });
  </script>
</section>