InnerFormValidation

🚀 Utilize o CSS abaixo para ajustar visualmente seu formulário automaticamente:

                                    
        /* Estados de Validação */
        .success {
            border-color: #28a745 !important;        
        }

        .error {
            border-color: #dc3545 !important;    
            animation: shake 0.5s;
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-5px);
            }

            75% {
                transform: translateX(5px);
            }
        }

        .has-error .form-control {
            border-color: #dc3545;
        }

        /* Indicadores de força da senha */  
        [data-pwstrength="4"] {
             border-left: 5px solid #28a745; /* Verde - Forte */
        }

        [data-pwstrength="3"] {
            border-left: 5px solid #ffc107; /* Amarelo - Média */
        }

        [data-pwstrength="2"],
        [data-pwstrength="1"] {
            border-left: 5px solid #dc3545; /* Vermelho - Fraca */
        }            

        [data-pwstrength="4"]::after {
            content: "💪 Senha Forte";
            color: #28a745;
            font-weight: bold;
        }
        

        [data-pwstrength="3"]::after {
            content: "👍 Senha Média";
            color: #ffc107;
            font-weight: bold;
        }

        [data-pwstrength="2"]::after,
        [data-pwstrength="1"]::after {
            content: "⚠️ Senha Fraca";
            color: #dc3545;
            font-weight: bold;
        }

        [data-pwstrength="0"]::after {
            content: "❌ Muito Fraca";
            color: #dc3545;
            font-weight: bold;
        }

        /* Indicador de bandeira do cartão */
      

        [data-flagcard="visa"]::after {
            content: "💳 Visa";
            color: #1a1f71;
        }

        [data-flagcard="mastercard"]::after {
            content: "💳 Mastercard";
            color: #eb001b;
        }

        [data-flagcard="amex"]::after {
            content: "💳 American Express";
            color: #006fcf;
        }

        [data-flagcard="elo"]::after {
            content: "💳 Elo";
            color: #ffcb05;
        }
                                    
                                

🚀 Como usar esta biblioteca:

• 1. Adicione a classe validate ao formulário
• 2. Adicione classes de validação aos campos (ex: obg, email, cpf)
• 3. Adicione mask junto com a validação para aplicar máscara
• 4. Use onkeyup para validar em tempo real
• 5. Configure callbacks com atributos data-*