HTML5 నేటివ్ క్లయింట్-సైడ్ వాలిడేషన్: required, pattern (Regex), min, max & CSS :valid/:invalid

<form action="/submit" method="POST" style="max-width: 400px; padding: 16px; border: 1px solid #cbd5e1; border-radius: 8px;">
  <p>
    <label for="full-name">పూర్తి పేరు <span style="color:red;">*</span>:</label><br>
    <input type="text" id="full-name" name="name" required placeholder="మీ పేరు నమోదు చేయండి" style="width:100%; padding:8px; margin-top:4px;">
  </p>

  <p>
    <label for="user-mail">ఈమెయిల్ చిరునామా <span style="color:red;">*</span>:</label><br>
    <input type="email" id="user-mail" name="email" required placeholder="name@domain.com" style="width:100%; padding:8px; margin-top:4px;">
  </p>

  <button type="submit" style="background:#10b981; color:white; border:none; padding:10px 20px; border-radius:6px; cursor:pointer;">
    సబ్మిట్ చేయండి
  </button>
</form>

<label for="secure-pass">బలమైన పాస్‌వర్డ్ (కనీసం 8, గరిష్టంగా 20 అక్షరాలు):</label><br>
<input type="password" id="secure-pass" name="password" minlength="8" maxlength="20" required 
       placeholder="8 నుండి 20 అక్షరాలు" style="padding:8px; width:100%; max-width:350px;">

<form style="max-width: 450px;">
  <!-- 1. టికెట్ల సంఖ్య (కనిష్టంగా 1, గరిష్టంగా 5) -->
  <p>
    <label for="tickets">సినిమా టికెట్ల సంఖ్య (1 నుండి 5 మాత్రమే):</label><br>
    <input type="number" id="tickets" name="ticket_count" min="1" max="5" value="1" required style="padding:6px 10px;">
  </p>

  <!-- 2. పెట్రోల్ లీటర్లు (step="0.5" తో సగం లీటర్లు కూడా అనుమతి) -->
  <p>
    <label for="fuel">ఇంధనం పరిమాణం (లీటర్లలో - 0.5 స్టెప్):</label><br>
    <input type="number" id="fuel" name="liters" min="0.5" max="50" step="0.5" value="1.0" style="padding:6px 10px;">
  </p>

  <!-- 3. జర్నీ డేట్ (గత తేదీలను ఎంచుకోకుండా ఆపడం) -->
  <p>
    <label for="journey">ప్రయాణ తేదీ (2026 నవంబర్ మాత్రమే):</label><br>
    <input type="date" id="journey" name="travel_date" min="2026-11-01" max="2026-11-30" required style="padding:6px;">
  </p>
</form>

<form style="max-width: 400px;">
  <p>
    <label for="pin">భారతీయ 6 అంకెల పిన్‌కోడ్:</label><br>
    <input type="text" id="pin" name="pincode" 
           pattern="[1-9][0-9]{5}" 
           title="దయచేసి సరైన 6 అంకెల భారతీయ పిన్‌కోడ్ నమోదు చేయండి (సున్నాతో ప్రారంభం కాకూడదు)" 
           required 
           placeholder="ఉదా: 500081" 
           style="padding: 8px; width: 100%; margin-top: 4px;">
  </p>
  <button type="submit" style="background:#10b981; color:white; padding:8px 16px; border:none; border-radius:6px; cursor:pointer;">ధృవీకరించండి</button>
</form>

<form>
  <label for="telugu-mail">ఈమెయిల్ రాయండి:</label><br>
  <input type="email" id="telugu-mail" required 
         oninvalid="this.setCustomValidity('దయచేసి మీ సరైన ఈమెయిల్ అడ్రస్ నమోదు చేయండి!')" 
         oninput="this.setCustomValidity('')" 
         style="padding: 8px; width: 300px; margin-top: 4px;">
  <button type="submit" style="padding: 8px 14px;">సబ్మిట్</button>
</form>

<style>
  /* డేటా సరైన ఫార్మాట్‌లో ఉన్నప్పుడు పచ్చటి బోర్డర్ */
  input:focus:valid {
    border: 2px solid #10b981;
    background-color: #f0fdf4;
    outline: none;
  }

  /* డేటా తప్పుగా ఉన్నప్పుడు ఎర్రటి బోర్డర్ */
  input:focus:invalid {
    border: 2px solid #ef4444;
    background-color: #fef2f2;
    outline: none;
  }
</style>

<form style="max-width: 400px; padding: 16px;">
  <label for="v-mail">ఈమెయిల్ (టైప్ చేసి గ్రీన్/రెడ్ బోర్డర్ గమనించండి):</label><br>
  <input type="email" id="v-mail" required placeholder="test@example.com" 
         style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; margin-top: 6px;">
</form>

<form action="/submit" method="POST">
  <input type="email" name="mail" required>

  <!-- ఈ బటన్ వాలిడేషన్ లేకుండానే సబ్మిట్ అవుతుంది -->
  <button type="submit" formnovalidate name="action" value="draft" style="background:#64748b; color:white; padding:8px 12px;">
    డ్రాఫ్ట్‌గా భద్రపరచండి
  </button>

  <!-- ఈ బటన్ వాలిడేషన్ పూర్తి అయితేనే సబ్మిట్ అవుతుంది -->
  <button type="submit" name="action" value="publish" style="background:#10b981; color:white; padding:8px 12px;">
    ప్రచురించండి
  </button>
</form>