Cómo crear prototipos de formularios con campos obligatorios
Este artículo te enseña a crear prototipos de formularios con campos obligatorios.
Así es como se construye:
Ver
- Desde los «Campos de entrada interactivos», coloca tres «Campos de texto de entrada» en el lienzo.
- Selecciona «Texto» y coloca uno junto a cada «Campo de texto de entrada» y escribe «Nombre», «Número de teléfono» y «Dirección de correo electrónico».
- Coloca un nuevo «Texto» junto al primer «Campo de texto de entrada» y escribe tu mensaje de error; este error comprobará si el primer campo de entrada está vacío; con este texto seleccionado, ve a la paleta Propiedades y haz clic en el icono «Oculto en simulación».
- Coloca un nuevo «Texto» debajo de tu último «Campo de texto de entrada» para la validación de la dirección de correo electrónico, ve a la paleta Propiedades y haz clic en el icono «Oculto en simulación».
- Coloca un «Botón» abajo para terminar tu formulario.
Eventos
Con el «Botón» seleccionado, vuelve a la paleta Eventos y haz clic en «Añadir evento».
- En el cuadro de diálogo, haz clic en «Elegir activador», pasa el ratón por encima de la sección «Ratón» y selecciona «al hacer clic».
- En «Elegir acción», selecciona «Mostrar elemento oculto» y selecciona el texto oculto de validación de nombre. Haz clic en «Aceptar» para terminar de crear el evento.
Ve a la paleta Eventos y haz clic en «Añadir condición» para abrir el constructor de expresiones.
Arrastra y suelta el nombre «Campo de texto de entrada» en el espacio abierto de la expresión; a continuación, arrastra una función lógica «Igual» (=), y deja vacío el siguiente campo. Cuando la entrada «Nombre» esté vacía, aparecerá el mensaje de error. Haz clic en «Aceptar» para terminar de construir la expresión.
Vuelve a la paleta Eventos y haz clic en «Si no»; se abrirá el diálogo de eventos.
- En el cuadro de diálogo, haz clic en «Elegir activador», pasa el ratón por encima de la sección «Ratón» y selecciona «al hacer clic».
- En «Elegir acción», selecciona «Ocultar elemento» y haz clic en el mensaje de error. Haz clic en «Aceptar» para terminar de crear el evento (si el campo «Nombre» está completo, al hacer clic en el botón «Enviar» desaparecerá el mensaje de error).
Con el «Botón» seleccionado, ve a la paleta Eventos y haz clic en «Añadir interacción».
- En el cuadro de diálogo, haz clic en «Elegir activador», pasa el ratón por encima de la sección «Ratón» y selecciona «al hacer clic».
- En «Elegir acción», selecciona «Mostrar elemento oculto» y selecciona el texto oculto de validación del correo electrónico. Haz clic en «Aceptar» para terminar de crear el evento.
Ve a la paleta Eventos y haz clic en «Añadir condición» para abrir el constructor de expresiones.
Arrastra y suelta una función «No», después arrastra la función lógica «RegExp», y en el campo siguiente, tira de la validación de correo electrónico «Campo de texto de entrada», por último, de la pestaña «Constante» la expresión regular «@». Haz clic en «Aceptar» para terminar de construir la expresión.
Vuelve a la paleta Eventos y haz clic en «Si no»; se abrirá el diálogo de eventos.
- En el cuadro de diálogo, haz clic en «Elegir activador», pasa el ratón por encima de la sección «Ratón» y selecciona «al hacer clic».
- En «Elegir acción», selecciona «Ocultar elemento» y haz clic en el mensaje de error de validación del correo electrónico. Haz clic en «Aceptar» para terminar de crear el evento (si el campo «Correo electrónico» está completo, al hacer clic en el botón «Enviar» desaparecerá el mensaje de error).
Simula tu prototipo.