Unique CSS Validation - By Vijay Pancholi

by Vijay Pancholi

HTML

<form novalidate>
  <input type="text" placeholder="Name" required minlength="3" />
  <input type="email" placeholder="Email" required />
  <input type="password" placeholder="Password" required minlength="6" />
  <input type="number" placeholder="Age" required min="18" max="99" />
  <button type="submit">Submit</button>
</form>

CSS

body {
        font-family: Arial, sans-serif;
        background: #f5f7fa;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      form {
        background: white;
        padding: 2rem;
        border-radius: 15px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        width: 300px;
      }

      input {
        width: 100%;
        padding: 0.7rem;
        margin-bottom: 2rem;
        border-radius: 8px;
        border: 2px solid #ccc;
        font-size: 1rem;
        outline: none;
        transition: 0.3s;
        position: relative;
      }

      input:valid {
        border-color: #4caf50;
        background-image: url("data:image/svg+xml;utf8,✅");
        background-repeat: no-repeat;
        background-position: right 10px center;
      }

      input:invalid:focus {
        animation: shake 0.3s ease;
        border-color: #e53935;
        background-image: url("data:image/svg+xml;utf8,❌");
        background-repeat: no-repeat;
        background-position: right 10px center;
      }

      input:valid:focus {
        background-image: url("data:image/svg+xml;utf8,😎");
      }

      @keyframes shake {
        0% {
          transform: translateX(0);
        }
        25% {
          transform: translateX(-5px);
        }
        50% {
          transform: translateX(5px);
        }
        75% {
          transform: translateX(-5px);
        }
        100% {
          transform: translateX(0);
        }
      }

      input:focus:required:invalid {
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
      }

      button {
        padding: 0.6rem;
        width: 100%;
        background: #2196f3;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 1rem;
        cursor: pointer;
      }

      button:hover {
        background: #1976d2;
      }