validar entradas de formulario bootstrap4

Tengo este código en mi plantilla de vue

        

          

            
            
            

              Password match
            

            

              Password not match

Quiero mostrar como la documentación bootstrap4 un campo de entrada verde si la contraseña coincide o una roja si la contraseña no coincide. Estoy intentando añadir el was-validated clase a la form-row si el método exigido vuelve verdadero pero cuando la vista donde las entradas de contraseña se hacen los dos campos de entrada siempre son rojos. ¿Cómo puedo arreglar esto para dar la respuesta correcta al usuario?

Pregunta hecha hace 3 años, 4 meses, 28 días - Por csharpsorcerer

3 Respuestas:

  • Por favor, comparta siempre todas las partes relevantes del componente de otro modo, es difícil saber dónde reside el problema. Aquí, no has compartido tu

    Así que, en mi opinión, sólo debe establecer la clase dinámica (is-valid o is-invalid) cuando ambas entradas se proporcionan. En este ejemplo he añadido eso a ambos contraseña y contraseña Check pero creo que es suficiente aplicarlo a los campos contraseña Check porque ese es el que se comprobó contra el contraseña.

    Si sólo quieres comprobar después de que el usuario salga del campo, puedes ajustar el código así:

    En la plantilla eliminar:

    :class="{'was-validated': this.checkPassword()}"

    Y actualización:

    @blur="checkPassword()

    En el data() añadir:

    blurred: false,

    En la actualización de los métodos:

    methods: {
    checkPassword() {
        this.blurred = true;
        this.error = this.password !== this.passwordCheck;
    },
    getPasswordClass() {
        if (!this.blurred) {
            return '';
        }

        return this.error ? 'is-invalid' : 'is-valid'
    },
    ...
}

    Respondida el Dec 17, 2020 a las 16:22 - por codesculptor

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando probablemente se deba a cómo estás manejando la validación de las contraseñas en tu código. Parece que estás usando el método checkPassword() para validar las contraseñas, pero no estás devolviendo un valor booleano que indique si las contraseñas coinciden o no.

    Para solucionar este problema, te recomendaría ajustar tu método checkPassword() para que devuelva true si las contraseñas coinciden y false si no coinciden. Luego, puedes usar este valor para aplicar la clase was-validated en la form-row correspondiente.

    Aquí hay una sugerencia de cómo podrías ajustar tu código:

    • Asegúrate de que el método checkPassword() devuelva un valor booleano:
    js
methods: {
  checkPassword() {
    return this.password === this.passwordCheck;
  }
}
    • Utiliza el valor devuelto por `checkPassword()` para aplicar la clase `was-validated` en la `form-row`:
    html

    Con estos ajustes, el color de las cajas de contraseña se mostrará correctamente según si las contraseñas coinciden o no. Asegúrate de probar la funcionalidad para confirmar que ahora funciona como se espera.

    Respondida el Dec 18, 2020 a las 16:22 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El problema es que estás añadiendo la clase was-validated solo cuando el método checkPassword() devuelve true, pero nunca la eliminas cuando devuelve false. Para solucionarlo, puedes usar la propiedad :class de Vue.js para aplicar condicionalmente clases al elemento form-row.

    Aquí tienes el código corregido:

    html

    Con este cambio, la clase is-invalid se aplicará al elemento form-row cuando el método checkPassword() devuelva false, lo que mostrará el campo de entrada en rojo.

    Respondida el Dec 18, 2020 a las 16:25 - por Gemini

    Votos positivos: 0 | Votos negativos: 0