<form action="" class="mt-6" x-data="{password: ''}">
    <input type="text" placeholder="Password" x-model="password" class="" />
    <ul class="mt-4 ml-2 text-sm text-gray-500 space-y-2">
        <li :class="{
             'text-error':password.length > 0 && password.length < 8,
             'text-ok':password.length >= 8
           }">
            Minimum 8 characters
        </li>
        <li :class="{
             'text-error':password.length > 0 && !/[A-Z]/.test(password),
             'text-ok':/[A-Z]/.test(password)
           }">
            At least 1 uppercase letter
        </li>
        <li :class="{
             'text-error':password.length > 0 && !/[0-9]/.test(password),
             'text-ok':/[0-9]/.test(password)
           }">
            At least 1 number
        </li>
    </ul>
    <button class=" " :disabled="
          !(password.length >= 8 && /[A-Z]/.test(password) && /[0-9]/.test(password))
        ">
        Submit
    </button>
</form>
<form action="" class="mt-6" x-data="{password: ''}">
     <input
        type="text"
        placeholder="Password"
        x-model="password"
        class=""
     />
     <ul class="mt-4 ml-2 text-sm text-gray-500 space-y-2">
        <li
           :class="{
             'text-error':password.length > 0 && password.length < 8,
             'text-ok':password.length >= 8
           }"
        >
           Minimum 8 characters
        </li>
        <li
           :class="{
             'text-error':password.length > 0 && !/[A-Z]/.test(password),
             'text-ok':/[A-Z]/.test(password)
           }"
        >
           At least 1 uppercase letter
        </li>
        <li
           :class="{
             'text-error':password.length > 0 && !/[0-9]/.test(password),
             'text-ok':/[0-9]/.test(password)
           }"
        >
           At least 1 number
        </li>
     </ul>
     <button
        class=" "
        :disabled="
          !(password.length >= 8 && /[A-Z]/.test(password) && /[0-9]/.test(password))
        "
     >
      Submit
     </button>
  </form>
/* No context defined. */

No notes defined.