Introducción a las Validaciones

Requisitos previos: Haber completado el tema de "Creando Formularios" y haber intentado el ejercicio "Práctico: Creación de Contenido del Formulario"; también estás familiarizado con los diferentes Tipos de Preguntas.

En este tema, profundizaremos en el Conditional Display (Visualización Condicional) skip logic (lógica de omisión).

Para cada tipo de pregunta, tienes cuatro pestañas principales en la barra superior:

• Question (Pregunta) - Contienen la variable de la pregunta y la etiqueta.
• Conditional Display (Visualización Condicional) - Contiene la lógica de omisión.
• Validation (Validación) - Donde podemos definir algunas validaciones y mensajes de error.
• Advanced (Avanzado) - Donde podemos utilizar estilos CSS personalizados.

Cuando hacemos clic en la pestaña de Validation (Validación), vemos que aquí podemos ingresar la lógica para validar una pregunta basada en la pregunta anterior o actual. Para el tipo de pregunta numérica, también podemos ingresar directamente valores mínimos y máximos. Para toda la validación, también tenemos la opción de especificar un mensaje de error predeterminado.

Los Inputs (Cajas de Texto) son comunes para todas las pantallas de validación:

Warn If (Advertir Si): Este input te permite definir lógica para emitir una advertencia si la condición es verdadera. Una validación de advertencia significa que al hacer clic en Siguiente o Enviar fallará la primera vez que el usuario lo haga, pero permitirá que el usuario continúe en el segundo intento.

Warning Text (Texto de Advertencia): Este es el texto que se muestra al usuario cuando se activa una condición de advertencia.

Valid If (Válido Si): Este input te permite definir lógica para emitir un error si la condición es verdadera. Una lógica de "Valid If" (Válido Si) significa que al hacer clic en Next (Siguiente) o Submit (Enviar) fallará cuando se cumpla la condición y el usuario se verá obligado a corregir la entrada.

Error Text (Texto de Error): Este es el texto que se muestra al usuario cuando se activa un error de validación.

Toda la lógica de advertencia y validación puede utilizar la función "getValue", pero también puedes acceder al valor actual de la entrada refiriéndote a "input.value". En muchos casos, también usamos la función "parseInt" para convertir la pregunta de texto en un número.

En el siguiente ejemplo, ves un pregunta definida que activará una validación si el valor es mayor que 5. Si está entre 5 y 7, solo se mostrará un mensaje de advertencia, lo que significa que el usuario puede continuar si hace clic en Siguiente/Enviar nuevamente. Sin embargo, si el valor es mayor que 7, el usuario deberá corregir la entrada.

La validación más sencilla es para las preguntas de tipo número. Allí podemos especificar directamente los valores mínimo y máximo que aceptamos.

Agregaré un pregunta de edad de tipo número. Luego, en la pestaña de Validation (Validación), he definido los valores mínimos y máximos, así como el texto de error.

Quiero agregar una validación más a mi variable "stu_number", asegurándome de que tenga exactamente 6 caracteres. Para esto, usaré "input.value.length == 6".

Aquí es cómo se vería esto en la pregunta del número de estudiante.