{"id":124620,"date":"2018-02-16T12:30:29","date_gmt":"2018-02-16T11:30:29","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/adding-conditions-to-interactions\/"},"modified":"2025-02-03T16:45:03","modified_gmt":"2025-02-03T15:45:03","slug":"adding-conditions-to-interactions","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/anadir-condiciones-a-interacciones","title":{"rendered":"A\u00f1adir condiciones a las interacciones"},"content":{"rendered":"<p>Puedes a\u00f1adir condiciones en tus proyectos para definir cu\u00e1ndo debe o no desencadenarse un evento. Puedes utilizarlas para construir experiencias de usuario de alta fidelidad, como: <\/p>\n<ul>\n<li>Validaci\u00f3n de formularios<\/li>\n<li>Navegaci\u00f3n condicional por la pantalla<\/li>\n<li>Pantallas de bloqueo de combinaci\u00f3n<\/li>\n<li>Animaciones<\/li>\n<li>&#8230;y mucho m\u00e1s.<\/li>\n<\/ul>\n<p>En este tutorial, aprender\u00e1s los fundamentos del constructor de expresiones, que utilizar\u00e1s para construir condiciones.<\/p>\n<h2><a id=\"build-event\"><\/a>Construye un evento<\/h2>\n<p>Antes de poder a\u00f1adir una condici\u00f3n, tendr\u00e1s que crear un evento en tu proyecto. Por ejemplo, imagina que est\u00e1s creando un formulario para suscribirse a un bolet\u00edn con un campo de texto de entrada <kbd>F<\/kbd> y un bot\u00f3n <kbd>B<\/kbd>. Cuando env\u00edes el formulario, te gustar\u00eda enlazar con otra pantalla. <video class=\"lazyload\" style=\"\" preload=\"\" loop=\"\" muted=\"\" width=\"\" height=\"\" data-autoplay=\"\" data-poster=\"\" playsinline=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" verify-email-example.mp4=\"\" type=\"\" https:=\"\"><img decoding=\"async\" src=\"\" alt=\"\">Verificar correo electr\u00f3nico ejemplo<\/video><br \/>\nPara crear este evento:  <\/p>\n<ol>\n<li>Selecciona el bot\u00f3n, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43973\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-event-condition.png\" alt=\"Pulsa el bot\u00f3n \"a\u00f1adir evento\" en la paleta de eventos\" width=\"1253\" height=\"729\"><\/li>\n<li>Crea un evento <strong>Al hacer clic<\/strong> + <strong>Navegar a<\/strong> y selecciona una pantalla diferente a la que enlazar.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43975\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Nav-To-Condition-Event.png\" alt=\"En el evento Haz clic en Navegar a, enlaza con la Pantalla 2\" width=\"1107\" height=\"700\">\n<div><strong>Nota:<\/strong> para los proyectos de m\u00f3viles y tabletas, <strong>On Click<\/strong> ser\u00e1 <strong>On Tap<\/strong>.<\/div>\n<\/li>\n<\/ol>\n<p>Ver\u00e1s el evento que acabas de crear en la paleta Eventos, donde ahora ver\u00e1s un enlace de texto con la etiqueta \u00aba\u00f1adir condici\u00f3n\u00bb.<\/p>\n<h2><a id=\"define-condition\"><\/a>Define una condici\u00f3n<\/h2>\n<p>No quieres que se pueda enviar el formulario de suscripci\u00f3n al bolet\u00edn si no se ha introducido ninguna informaci\u00f3n en el formulario, as\u00ed que querr\u00e1s a\u00f1adir una condici\u00f3n a este evento. Haz clic en el texto \u00aba\u00f1adir condici\u00f3n\u00bb situado encima del evento que has creado en la paleta Eventos. Ver\u00e1s el constructor de Expresiones Condicionales. Este es su aspecto:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43969\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Conditional-expression-builder.png\" alt=\"Definici\u00f3n del constructor de expresiones condicionales\" width=\"1746\" height=\"1102\"><\/p>\n<ol class=\"image-bullet\">\n<li><strong>La expresi\u00f3n<\/strong>: arrastrar\u00e1s componentes aqu\u00ed para construir la condici\u00f3n.<\/li>\n<li><strong>Funciones<\/strong> &#8211; esta pesta\u00f1a contiene opciones para definir la l\u00f3gica y otras comparaciones entre elementos.<\/li>\n<li><strong>Constantes<\/strong> &#8211; encuentra aqu\u00ed valores fijos, como la anchura o altura de la pantalla del proyecto, la hora de tu ordenador o f\u00f3rmulas de expresiones regulares.<\/li>\n<li><strong>Vista previa del lienzo<\/strong>: arrastra elementos de la pantalla a la expresi\u00f3n. S\u00f3lo podr\u00e1s utilizar elementos de la pantalla actual. <\/li>\n<li><strong>Variables<\/strong> &#8211; visualiza y utiliza las Variables de tu proyecto en la expresi\u00f3n.<\/li>\n<li>Maestros de <strong>Datos<\/strong> &#8211; encuentra aqu\u00ed tus Maestros de Datos y sus campos para utilizarlos en una expresi\u00f3n.<\/li>\n<\/ol>\n<p>Para crear una condici\u00f3n, puedes arrastrar y soltar cualquiera de esos elementos, constantes y funciones l\u00f3gicas a la expresi\u00f3n. Por ejemplo, para crear la condici\u00f3n que comprueba si el formulario de inscripci\u00f3n est\u00e1 vac\u00edo: <\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 61%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/742299808\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<ol>\n<li>Mira la vista previa del lienzo. Selecciona el campo de texto de entrada y arr\u00e1stralo hasta el espacio abierto en la expresi\u00f3n que dice \u00abhaz clic para editar o arrastra y suelta un componente\u00bb. <\/li>\n<li>En la pesta\u00f1a <strong>Funciones<\/strong>, despl\u00e1zate hasta la secci\u00f3n \u00abL\u00f3gica\u00bb. Arrastra una funci\u00f3n <strong>No es igual (\u2260<\/strong> ) junto al campo de texto de entrada de la expresi\u00f3n. <\/li>\n<li>Ver\u00e1s que aparece un nuevo espacio abierto en la expresi\u00f3n. Haz doble clic en este espacio, pero d\u00e9jalo en blanco. <\/li>\n<li>Haz clic en \u00abAceptar\u00bb para terminar de construir la expresi\u00f3n.<\/li>\n<\/ol>\n<p>La expresi\u00f3n que acabas de crear comprobar\u00e1 si el campo de texto de entrada no est\u00e1 vac\u00edo. Si no lo est\u00e1, pasar\u00e1 a la pantalla siguiente. Si est\u00e1 vac\u00edo, el evento no se activar\u00e1. Contin\u00faa en el siguiente tutorial y aprende a crear otras condiciones en tus proyectos.  <\/p>\n<h2>How-tos: aprende a dise\u00f1ar casos de uso comunes<\/h2>\n<p>Puedes utilizar condiciones en tus proyectos para crear experiencias de usuario din\u00e1micas, como la navegaci\u00f3n condicional, la validaci\u00f3n de mensajes de error\/formularios y mucho m\u00e1s. Echa un vistazo a los siguientes ejercicios para ver algunos ejemplos de c\u00f3mo utilizarlas en Justinmind. <\/p>\n<h2><a id=\"conditional-navigation\"><\/a>Navegaci\u00f3n condicional<\/h2>\n<p>En este tutorial aprender\u00e1s a crear una condici\u00f3n sencilla que compruebe qu\u00e9 valor seleccionas en un desplegable. A continuaci\u00f3n, enlazar\u00e1s con la pantalla correspondiente.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/conditional-navigation-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" conditional-navigation-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/conditional-navigation-example.png\" alt=\"Ejemplo de navegaci\u00f3n condicional\">Ejemplo de navegaci\u00f3n condicional<\/video><\/p>\n<h3>Dise\u00f1a el ejemplo<\/h3>\n<ol>\n<li>Crea una pantalla de B\u00fasqueda con textos y rect\u00e1ngulos. A\u00f1ade un bot\u00f3n y etiqu\u00e9talo como \u00abBuscar\u00bb. <\/li>\n<li>A\u00f1ade un widget desplegable\/lista de selecci\u00f3n al lienzo y dale el estilo que prefieras. Puedes encontrarlo en el desplegable de la Barra de Herramientas, en \u00abCampos de entrada interactivos\u00bb. <\/li>\n<li>Con el desplegable seleccionado, ve a la paleta Propiedades y haz clic en \u00abEditar valores\u00bb. Elimina todos los valores del cuadro de di\u00e1logo y a\u00f1ade dos nuevos: \u00abCasas\u00bb y \u00abApartamentos\u00bb. <video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 10px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/edit-dropdown-values.png\" playsinline=\"&gt;&lt;source src=\" https:=\"\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" edit-dropdown-values.mp4=\"\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/edit-dropdown-values.png\" alt=\"Editar valores desplegables\">Editar valores desplegables<\/video><\/li>\n<li>Haz clic en el bot\u00f3n \u00ab+\u00bb de la paleta Pantallas y crea dos pantallas nuevas. Nombra una \u00abCasas\u00bb y la otra \u00abApartamentos\u00bb. Personaliza estas pantallas como prefieras.  <\/li>\n<\/ol>\n<h3>Crea los eventos<\/h3>\n<ol>\n<li>Vuelve a la pantalla de B\u00fasqueda y selecciona el bot\u00f3n \u00abBuscar\u00bb. Busca la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb. Crea un evento <strong>On Tap<\/strong> + <strong>Navegar a<\/strong> y elige la pantalla Casas como objetivo.  <\/li>\n<li>Busca en la paleta Eventos, donde ver\u00e1s el evento que acabas de crear. Haz clic en el enlace de texto \u00aba\u00f1adir condici\u00f3n\u00bb situado encima de la acci\u00f3n, que abrir\u00e1 el constructor de Expresiones Condicionales. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44012\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-condition-nav.png\" alt=\"A\u00f1adir enlace de texto de condici\u00f3n en la paleta de eventos\" width=\"1444\" height=\"819\"><\/li>\n<li>Sigue estos pasos para construir la condici\u00f3n:\n<ul class=\"hidden-bullet\">\n<li>\n<div class=\"embed-container\" style=\"padding-bottom: 62%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/743400826\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li><strong>a.<\/strong>  Mira la vista previa del lienzo y arrastra el desplegable hasta el espacio abierto en la expresi\u00f3n etiquetada como \u00abHaz clic para editar o arrastra y suelta un componente\u00bb.<\/li>\n<li><strong>b.<\/strong> Arrastra la funci\u00f3n l\u00f3gica <strong>Igual (=<\/strong> ) junto al desplegable de la expresi\u00f3n.<\/li>\n<li><strong>c.<\/strong>  Ver\u00e1s que aparece un nuevo espacio abierto en la expresi\u00f3n. Haz doble clic en este espacio y escribe \u00abCasas\u00bb. <\/li>\n<li><strong>d.<\/strong>  Haz clic en \u00abAceptar\u00bb para terminar de construir la expresi\u00f3n.<\/li>\n<\/ul>\n<div><strong>Nota:<\/strong> el valor que escribas en la expresi\u00f3n debe coincidir con el valor del desplegable.<\/div>\n<p>El evento y la condici\u00f3n que acabas de crear te enlazar\u00e1n a la pantalla Casas s\u00f3lo si seleccionas \u00abCasas\u00bb en el desplegable.<\/li>\n<li>Todav\u00eda en la paleta Eventos, haz clic en el enlace de texto \u00abSi no\u00bb que aparece a continuaci\u00f3n. Crea otro evento <strong>On Tap<\/strong> + <strong>Navegar a<\/strong> y vinc\u00falalo a la pantalla Apartamentos.Como s\u00f3lo hay dos opciones que puedes seleccionar en el desplegable, no necesitas crear una condici\u00f3n para esta acci\u00f3n. <\/li>\n<\/ol>\n<p>As\u00ed es como debe ser tu paleta de eventos:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44025\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Conditional-navigation-events.png\" alt=\"La paleta de eventos muestra todos los eventos de este ejemplo\" width=\"1064\" height=\"647\"><br \/>\nPulsa el bot\u00f3n \u00abReproducir\u00bb para simular tu proyecto. Selecciona un valor del desplegable y acceder\u00e1s a la pantalla correspondiente. <\/p>\n<h2><a id=\"two-button-actions\"><\/a>Diferentes acciones en un bot\u00f3n<\/h2>\n<p>Tambi\u00e9n puedes utilizar condiciones para asignar diferentes acciones a un bot\u00f3n que se activar\u00e1n cada vez que hagas clic en \u00e9l.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 10px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/different-actions-button-example.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" different-actions-button-example.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/different-actions-button-example.png\" alt=\"Ejemplo de diferentes acciones en un bot\u00f3n\">Ejemplo de diferentes acciones en un bot\u00f3n<\/video><\/p>\n<h3>Dise\u00f1a el ejemplo<\/h3>\n<ol>\n<li>Coloca tres rect\u00e1ngulos y un bot\u00f3n en el Lienzo.<\/li>\n<li>Selecciona todos los rect\u00e1ngulos y m\u00e1rcalos como ocultos en la paleta Propiedades.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43925\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Hide-multi-rectangles.png\" alt=\"Ocultar los rect\u00e1ngulos en la paleta Propiedades\" width=\"1027\" height=\"344\"><\/li>\n<\/ol>\n<h3>Crea los eventos<\/h3>\n<ol>\n<li>Selecciona el bot\u00f3n en el Lienzo, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.<\/li>\n<li>Crea un evento <strong>Al hacer clic + Mostrar<\/strong>, seleccionando el primer rect\u00e1ngulo para mostrarlo con un efecto de fundido. Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43949\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Show-hidden-rectangle.png\" alt=\"Crea un evento Al hacer clic + Mostrar, mostrando el primer rect\u00e1ngulo con un efecto de fundido\" width=\"1324\" height=\"838\"><\/li>\n<li>Vuelve a la paleta Eventos y haz clic en el enlace de texto \u00aba\u00f1adir condici\u00f3n\u00bb situado encima del evento que acabas de crear. Sigue estos pasos para construir la expresi\u00f3n:\n<ul class=\"hidden-bullet\">\n<li><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43950\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Rectangle-not-visible-condition.png\" alt=\"Arrastra el rect\u00e1ngulo hasta el espacio abierto en la expresi\u00f3n y selecciona \"es visible\" en el desplegable. Coloca una funci\u00f3n Not delante\" width=\"818\" height=\"498\"><\/li>\n<li><strong>a.<\/strong>  Arrastra el primer rect\u00e1ngulo al espacio abierto en la expresi\u00f3n.<\/li>\n<li><strong>b.<\/strong>  Ver\u00e1s que aparece un desplegable debajo del elemento en la expresi\u00f3n. Haz clic en \u00e9l y selecciona la opci\u00f3n \u00abEs visible\u00bb. <\/li>\n<li><strong>c.<\/strong> Arrastra una funci\u00f3n l\u00f3gica <strong>Not<\/strong> a la expresi\u00f3n. Haz clic en \u00abAceptar\u00bb para terminar de construir la expresi\u00f3n.<\/li>\n<li>Esta condici\u00f3n comprueba si el primer rect\u00e1ngulo no es visible. Si no lo est\u00e1, mostrar\u00e1 el primer rect\u00e1ngulo. <\/li>\n<\/ul>\n<\/li>\n<li>Haz clic en el texto \u00abSi no\u00bb y crea otro evento <strong>On Click<\/strong> + <strong>Mostrar<\/strong>, seleccionando el segundo rect\u00e1ngulo para mostrarlo con un efecto de fundido.<\/li>\n<li>Haz clic en el texto \u00abSi no, a\u00f1ade una condici\u00f3n\u00bb situado encima de la acci\u00f3n que acabas de crear y crea esta condici\u00f3n:\n<ul class=\"hidden-bullet\">\n<li><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44018\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Rectangle-visible-condition.png\" alt=\"En esta condici\u00f3n, el primer rect\u00e1ngulo debe ser visible y el segundo rect\u00e1ngulo no debe ser visible\" width=\"1198\" height=\"709\"><\/li>\n<li><strong>a.<\/strong>  Arrastra el primer rect\u00e1ngulo al espacio abierto en la expresi\u00f3n y selecciona \u00abEs visible\u00bb en el desplegable.<\/li>\n<li><strong>b.<\/strong> Coloca una funci\u00f3n l\u00f3gica <strong>Y (&amp;)<\/strong> junto al rect\u00e1ngulo de la expresi\u00f3n.<\/li>\n<li><strong>c.<\/strong>  Arrastra el segundo rect\u00e1ngulo al espacio abierto en la expresi\u00f3n y selecciona \u00abEs visible\u00bb en el desplegable.<\/li>\n<li><strong>d.<\/strong> Coloca una funci\u00f3n l\u00f3gica <strong>Not<\/strong> a la izquierda del segundo rect\u00e1ngulo y pulsa \u00abAceptar\u00bb para terminar de construir la expresi\u00f3n.<\/li>\n<li>Esta condici\u00f3n comprueba si el primer rect\u00e1ngulo es visible y el segundo rect\u00e1ngulo no es visible en el lienzo. Si es as\u00ed, mostrar\u00e1 el segundo rect\u00e1ngulo. <\/li>\n<\/ul>\n<\/li>\n<li>Toca de nuevo el enlace de texto \u00abSi no\u00bb y crea otro evento <strong>Al hacer clic<\/strong> + <strong>Mostrar<\/strong>, seleccionando el tercer rect\u00e1ngulo para mostrarlo con un efecto de fundido. No necesitar\u00e1s a\u00f1adir una condici\u00f3n a este evento. <\/li>\n<\/ol>\n<p>As\u00ed es como debe ser tu paleta de Eventos:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43953\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Events-palette-multi-event-button.png\" alt=\"Vista de la paleta de eventos con todos los eventos\" width=\"882\" height=\"632\"><br \/>\nPulsa el bot\u00f3n \u00abReproducir\u00bb para simular tu proyecto. Pulsa el bot\u00f3n para ver aparecer el primer rect\u00e1ngulo. Vuelve a pulsar el bot\u00f3n para ver aparecer el segundo rect\u00e1ngulo, y vuelve a pulsarlo una vez m\u00e1s para ver el \u00faltimo rect\u00e1ngulo.  <\/p>\n<h2><a id=\"error-messages\"><\/a>Mensajes de error en un formulario de entrada<\/h2>\n<p>Ahora aprender\u00e1s a crear condiciones que comprueben si todos los campos de un formulario se han rellenado y validado correctamente. Si no lo est\u00e1n, mostrar\u00e1s un mensaje de error.<br \/>\n<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/error-message-preview.png\" playsinline=\"&gt;&lt;source src=\" assets.justinmind.com=\"\" wp-content=\"\" uploads=\"\" error-message-preview.mp4=\"\" type=\"video\/mp4\" https:=\"\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/08\/error-message-preview.png\" alt=\"Vista previa del mensaje de error\">Vista previa del mensaje de error<\/video><\/p>\n<h3>Dise\u00f1a el ejemplo<\/h3>\n<ol>\n<li>Arrastra dos Campos de Texto de Entrada <kbd>F<\/kbd> y un Bot\u00f3n al Lienzo. Alin\u00e9alos para que coincidan con el ejemplo. <\/li>\n<li>Haz doble clic en cada campo de texto de entrada para a\u00f1adir un valor de marcador de posici\u00f3n. Escribe \u00abCorreo electr\u00f3nico\u00bb y \u00abContrase\u00f1a\u00bb. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43959\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-placeholder.png\" alt=\"Escribe valores de marcador de posici\u00f3n en cada campo de texto de entrada de la paleta de propiedades\" width=\"819\" height=\"450\" srcset=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-placeholder.png 1640w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-placeholder-300x165.png 300w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-placeholder-768x421.png 768w, https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-placeholder-1024x562.png 1024w\" sizes=\"(max-width: 819px) 100vw, 819px\" \/><\/li>\n<li>A\u00f1ade dos elementos de texto, colocando uno debajo de cada campo de texto de entrada. Etiqu\u00e9talos como \u00abPor favor, introduce un correo electr\u00f3nico v\u00e1lido\u00bb y \u00abPor favor, introduce una contrase\u00f1a\u00bb, que ser\u00e1n los mensajes de error que mostrar\u00e1s si el formulario no se completa completamente.<\/li>\n<li>Selecciona ambos mensajes de error y m\u00e1rcalos como ocultos en la paleta Propiedades. Puedes utilizar <kbd>May\u00fasculas<\/kbd> para seleccionarlos varias veces en el lienzo. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43962\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Hide-error-messages.png\" alt=\"Ocultar los mensajes de error en la paleta de propiedades\" width=\"914\" height=\"381\"><\/li>\n<\/ol>\n<h3>Crea los eventos<\/h3>\n<ol>\n<li>Selecciona el bot\u00f3n \u00abInscribirse\u00bb, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb. Crea un evento <strong>Al hacer clic<\/strong> + <strong>Mostrar<\/strong>, seleccionando el mensaje de error \u00abIntroduzca un correo electr\u00f3nico v\u00e1lido\u00bb para mostrarlo.  Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-44020\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Show-error-event.png\" alt=\"Elige el mensaje de error de correo electr\u00f3nico oculto que quieres mostrar\" width=\"1087\" height=\"686\"><\/li>\n<li>Haz clic en el enlace de texto \u00aba\u00f1adir condici\u00f3n\u00bb situado encima del evento que acabas de crear. Sigue estos pasos para construir la expresi\u00f3n:\n<ul class=\"hidden-bullet\">\n<li><strong>a.<\/strong> Arrastra una funci\u00f3n l\u00f3gica <strong>de Expresi\u00f3n Regular (Reg Exp)<\/strong> al espacio abierto en la expresi\u00f3n.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43984\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Reg-Exp-Condition.png\" alt=\"Funci\u00f3n l\u00f3gica de expresi\u00f3n regular a\u00f1adida a la expresi\u00f3n\" width=\"843\" height=\"469\"><\/li>\n<li><strong>b.<\/strong>  Ver\u00e1s que aparecen dos espacios abiertos. Arrastra el campo de texto de entrada \u00abCorreo electr\u00f3nico\u00bb al espacio abierto de la izquierda. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43987\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Email-input-condition.png\" alt=\"Arrastra el campo de entrada de correo electr\u00f3nico al espacio abierto de la izquierda\" width=\"843\" height=\"469\"><\/li>\n<li><strong>c.<\/strong> Haz clic en la pesta\u00f1a <strong>Constantes<\/strong> y en la secci\u00f3n \u00abExpresiones regulares\u00bb. Arrastra la constante <strong>Email (@<\/strong> ) al espacio abierto de la derecha. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43989\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Email-constant.png\" alt=\"Constante de correo electr\u00f3nico en el espacio abierto de la derecha\" width=\"1158\" height=\"764\"><\/li>\n<li><strong>d.<\/strong> Vuelve a la pesta\u00f1a <strong>Funciones<\/strong>. Arrastra una funci\u00f3n l\u00f3gica <strong>Not<\/strong> delante de la expresi\u00f3n.  Haz clic en \u00abAceptar\u00bb para terminar de construir la expresi\u00f3n.<\/li>\n<li>Esta condici\u00f3n comprueba si el valor que has introducido en el campo de texto de entrada coincide o no con la estructura de una direcci\u00f3n de correo electr\u00f3nico. Si no coincide, mostrar\u00e1 el mensaje de error. <\/li>\n<\/ul>\n<\/li>\n<li>Haz clic en el texto \u00abSi no\u00bb situado debajo del evento que acabas de crear y crea un evento <strong>Al hacer clic<\/strong> + <strong>Ocultar<\/strong>, seleccionando el mensaje de error \u00abIntroduzca un correo electr\u00f3nico v\u00e1lido\u00bb para ocultarlo.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43977\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-else-event.png\" alt=\"Haz clic en el texto \"Si no\" situado debajo de los eventos que has creado\" width=\"1345\" height=\"760\"><\/li>\n<li>Haz clic en el bot\u00f3n \u00ab+\u00bb de la parte superior de la paleta Eventos para crear una nueva interacci\u00f3n. Crea un evento <strong>Al hacer clic<\/strong> + <strong>Mostrar<\/strong>, seleccionando el mensaje de error \u00abIntroduzca una contrase\u00f1a\u00bb que se mostrar\u00e1. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43980\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Add-new-interaction.png\" alt=\"Pulsa el bot\u00f3n + para crear una nueva interacci\u00f3n\" width=\"593\" height=\"236\"><\/li>\n<li>Haz clic en el enlace de texto \u00aba\u00f1adir condici\u00f3n\u00bb situado encima del evento que acabas de crear, lo que abrir\u00e1 el constructor de Expresiones Condicionales. Sigue estos pasos para construir la expresi\u00f3n:\n<ul class=\"hidden-bullet\">\n<li>\n<div class=\"embed-container\" style=\"padding-bottom: 66%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/743407649\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li><strong>a.<\/strong>  Desde la vista previa del lienzo, arrastra y suelta el campo de texto de entrada \u00abContrase\u00f1a\u00bb en el espacio abierto de la expresi\u00f3n.<\/li>\n<li><strong>b.<\/strong> Coloca una funci\u00f3n l\u00f3gica <strong>Igual (=)<\/strong> junto al campo de texto de entrada.<\/li>\n<li><strong>c.<\/strong>  Ver\u00e1s que aparece un nuevo espacio abierto. Haz doble clic en \u00e9l, pero d\u00e9jalo vac\u00edo.  Haz clic en \u00abAceptar\u00bb para terminar de construir la expresi\u00f3n.<\/li>\n<li>Esta condici\u00f3n comprueba si no hay ning\u00fan valor introducido en el campo de texto de entrada. Si es as\u00ed, ver\u00e1s aparecer el mensaje de error que has creado. <\/li>\n<\/ul>\n<\/li>\n<li>Toca el enlace de texto \u00abSi no\u00bb situado debajo de los eventos que acabas de crear y crea un evento <strong>Al hacer clic<\/strong> + <strong>Ocultar<\/strong>, seleccionando el mensaje de error \u00abIntroduzca una contrase\u00f1a\u00bb para ocultarlo. Esto ocultar\u00e1 el mensaje de error si has introducido alg\u00fan valor en el campo de texto de entrada \u00abContrase\u00f1a\u00bb. <\/li>\n<\/ol>\n<p>As\u00ed es como debe ser tu paleta de eventos:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43955\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2020\/08\/Error-messages-events-palette.png\" alt=\"Vista de la paleta de eventos con todos los eventos y condiciones\" width=\"903\" height=\"746\"><br \/>\nPulsa el bot\u00f3n \u00abReproducir\u00bb para simular tu proyecto. Rellena uno de los campos de texto de entrada, pero deja el otro en blanco. Pulsa el bot\u00f3n \u00abRegistrar\u00bb y ver\u00e1s que aparece un mensaje de error. Introduce un valor en el campo de texto de entrada y vuelve a pulsar el bot\u00f3n para ver c\u00f3mo se ocultan los mensajes de error.   <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Puedes a\u00f1adir condiciones en tus proyectos para definir cu\u00e1ndo debe o no desencadenarse un evento. Puedes utilizarlas para construir experiencias de usuario de alta fidelidad, como:&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8418,8421],"tags":[],"class_list":["post-124620","post","type-post","status-publish","format-standard","hentry","category-formacion","category-interacciones-web-y-moviles"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124620"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124620"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124620\/revisions"}],"predecessor-version":[{"id":126216,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124620\/revisions\/126216"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}