{"id":124653,"date":"2022-11-16T18:10:11","date_gmt":"2022-11-16T17:10:11","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-forms-with-mandatory-selection-fields\/"},"modified":"2025-01-29T17:41:05","modified_gmt":"2025-01-29T16:41:05","slug":"how-to-create-forms-with-mandatory-selection-fields","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/como-crear-prototipos-de-formularios-con-campos-obligatorios","title":{"rendered":"C\u00f3mo crear prototipos de formularios con campos obligatorios"},"content":{"rendered":"<p>Este art\u00edculo te ense\u00f1a a crear prototipos de formularios con campos obligatorios.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73157099\/index.html\" width=\"820px\" height=\"430px\" frameborder=\"0\"><\/iframe><\/p>\n<p>As\u00ed es como se construye:<\/p>\n<h3>Ver<\/h3>\n<ul>\n<li>Desde los \u00abCampos de entrada interactivos\u00bb, coloca tres \u00abCampos de texto de entrada\u00bb en el lienzo.<\/li>\n<li>Selecciona \u00abTexto\u00bb y coloca uno junto a cada \u00abCampo de texto de entrada\u00bb y escribe \u00abNombre\u00bb, \u00abN\u00famero de tel\u00e9fono\u00bb y \u00abDirecci\u00f3n de correo electr\u00f3nico\u00bb.<\/li>\n<li>Coloca un nuevo \u00abTexto\u00bb junto al primer \u00abCampo de texto de entrada\u00bb y escribe tu mensaje de error; este error comprobar\u00e1 si el primer campo de entrada est\u00e1 vac\u00edo; con este texto seleccionado, ve a la paleta Propiedades y haz clic en el icono \u00abOculto en simulaci\u00f3n\u00bb.<\/li>\n<li>Coloca un nuevo \u00abTexto\u00bb debajo de tu \u00faltimo \u00abCampo de texto de entrada\u00bb para la validaci\u00f3n de la direcci\u00f3n de correo electr\u00f3nico, ve a la paleta Propiedades y haz clic en el icono \u00abOculto en simulaci\u00f3n\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71802\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/forms-mandatory-fields-1.png\" alt=\"eyeicon3\" width=\"301\" height=\"438\"><\/li>\n<li>Coloca un \u00abBot\u00f3n\u00bb abajo para terminar tu formulario.<\/li>\n<\/ul>\n<h3>Eventos<\/h3>\n<p><span data-preserver-spaces=\"true\">Con el \u00abBot\u00f3n\u00bb seleccionado, vuelve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abMostrar elemento oculto\u00bb y selecciona el texto oculto de validaci\u00f3n de nombre.  <\/span>Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71802\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/forms-mandatory-fields-3.png\" alt=\"eyeicon3\" width=\"301\" height=\"438\"><\/li>\n<\/ol>\n<p>Ve a la paleta Eventos y haz clic en \u00abA\u00f1adir condici\u00f3n\u00bb para abrir el constructor de expresiones.<br \/>\nArrastra y suelta el nombre \u00abCampo de texto de entrada\u00bb en el espacio abierto de la expresi\u00f3n; a continuaci\u00f3n, arrastra una funci\u00f3n l\u00f3gica \u00abIgual\u00bb (=), y deja vac\u00edo el siguiente campo. Cuando la entrada \u00abNombre\u00bb est\u00e9 vac\u00eda, aparecer\u00e1 el mensaje de error. Haz clic en \u00abAceptar\u00bb para terminar de construir la expresi\u00f3n.  <\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 57%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/762626517\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Vuelve a la paleta Eventos y haz clic en \u00abSi no\u00bb; se abrir\u00e1 el di\u00e1logo de eventos.<\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abOcultar elemento\u00bb y haz clic en el mensaje de error.  <\/span>Haz clic en \u00abAceptar\u00bb para terminar de crear el evento (si el campo \u00abNombre\u00bb est\u00e1 completo, al hacer clic en el bot\u00f3n \u00abEnviar\u00bb desaparecer\u00e1 el mensaje de error).<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71802\" style=\"font-size: inherit;\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/forms-mandatory-fields-4.png\" alt=\"eyeicon3\" width=\"301\" height=\"438\"><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Con el \u00abBot\u00f3n\u00bb seleccionado, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir interacci\u00f3n\u00bb.<\/span><\/p>\n<ol>\n<li>En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abMostrar elemento oculto\u00bb y selecciona el texto oculto de validaci\u00f3n del correo electr\u00f3nico.  <\/span>Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71802\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/forms-mandatory-fields-5.png\" alt=\"eyeicon3\" width=\"301\" height=\"438\"><\/li>\n<\/ol>\n<p>Ve a la paleta Eventos y haz clic en \u00abA\u00f1adir condici\u00f3n\u00bb para abrir el constructor de expresiones.<br \/>\nArrastra y suelta una funci\u00f3n \u00abNo\u00bb, despu\u00e9s arrastra la funci\u00f3n l\u00f3gica \u00abRegExp\u00bb, y en el campo siguiente, tira de la validaci\u00f3n de correo electr\u00f3nico \u00abCampo de texto de entrada\u00bb, por \u00faltimo, de la pesta\u00f1a \u00abConstante\u00bb la expresi\u00f3n regular \u00ab@\u00bb. Haz clic en \u00abAceptar\u00bb para terminar de construir la expresi\u00f3n. <\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 57%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/762629046\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Vuelve a la paleta Eventos y haz clic en \u00abSi no\u00bb; se abrir\u00e1 el di\u00e1logo de eventos.<\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal hacer clic\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abOcultar elemento\u00bb y haz clic en el mensaje de error de validaci\u00f3n del correo electr\u00f3nico.  <\/span>Haz clic en \u00abAceptar\u00bb para terminar de crear el evento (si el campo \u00abCorreo electr\u00f3nico\u00bb est\u00e1 completo, al hacer clic en el bot\u00f3n \u00abEnviar\u00bb desaparecer\u00e1 el mensaje de error).<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71802\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/forms-mandatory-fields-6.png\" alt=\"eyeicon3\" width=\"301\" height=\"438\"><\/li>\n<\/ol>\n<p>Simula tu prototipo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Este art\u00edculo te ense\u00f1a a crear prototipos de formularios con campos obligatorios. As\u00ed es como se construye: Ver Desde los \u00abCampos de entrada interactivos\u00bb, coloca tres&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8429,8424],"tags":[],"class_list":["post-124653","post","type-post","status-publish","format-standard","hentry","category-formularios-y-datos-es","category-trucos-avanzados"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124653"}],"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\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124653"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124653\/revisions"}],"predecessor-version":[{"id":124976,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124653\/revisions\/124976"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}