HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>error tilde help demo</title>

  <style>

    body { font-family: sans-serif; padding: 16px; max-width: 28rem; }

    .field { margin-bottom: 12px; }

    .error { color: #dc2626; font-weight: bold; font-size: 0.9rem; }

    .help-text { font-size: 0.85rem; color: #64748b; margin-top: 4px; }

    .help-text.visible { color: #b45309; background: #fffbeb; padding: 6px; border-radius: 4px; }

  </style>

</head>

<body>

  <div class="field">

    <label>Username</label>

    <input type="text">

    <div class="error">Required</div>

    <p class="help-text">At least 3 characters.</p>

    <p class="help-text">No spaces allowed.</p>

  </div>

  <div class="field">

    <label>Email</label>

    <input type="email">

    <p class="help-text">We never share your email.</p>

  </div>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>

    $(".error ~ .help-text").addClass("visible");

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

.error ~ .help-text validation hints (Try It)