{"id":49168,"date":"2023-06-20T23:08:00","date_gmt":"2023-06-20T14:08:00","guid":{"rendered":"https:\/\/contactform7.com\/?p=49168"},"modified":"2023-09-25T06:15:11","modified_gmt":"2023-09-24T21:15:11","slug":"setting-upper-limit-of-checkbox-selection","status":"publish","type":"post","link":"https:\/\/contactform7.com\/es\/2023\/06\/20\/setting-upper-limit-of-checkbox-selection\/","title":{"rendered":"Establecer el l\u00edmite m\u00e1ximo de selecci\u00f3n de casillas de verificaci\u00f3n"},"content":{"rendered":"\n<p>En esta receta, aprender\u00e1s a implementar una validaci\u00f3n de entrada de usuario que establece el l\u00edmite m\u00e1ximo de selecci\u00f3n de casillas de verificaci\u00f3n. Esta validaci\u00f3n se basa en el mecanismo <a href=\"https:\/\/contactform7.com\/es\/schema-woven-validation\/\" data-type=\"page\" data-id=\"42446\">Schema-Woven Validation<\/a> (SWV), por lo que tiene algunas grandes ventajas sobre la validaci\u00f3n anterior <a href=\"https:\/\/contactform7.com\/es\/2015\/03\/28\/custom-validation\/\">basada en filtros<\/a>, tales como:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Puedes utilizar reglas de validaci\u00f3n ya definidas por SWV, por lo que no necesitas codificar la l\u00f3gica de validaci\u00f3n por ti mismo.<\/li>\n\n\n\n<li>Una vez creada una regla de validaci\u00f3n SWV, esta puede funcionar en cualquier lugar siempre que sea compatible con SWV. Por otro lado, la validaci\u00f3n basada en filtros s\u00f3lo funciona en el lado del servidor.<\/li>\n<\/ul>\n\n\n\n<!--more-->\n\n\n\n<p>Muy bien, comencemos.<\/p>\n\n\n\n<p>En primer lugar, supongamos que tienes un grupo de <a href=\"https:\/\/contactform7.com\/es\/checkboxes-radio-buttons-and-menus\/\">casillas de verificaci\u00f3n<\/a> para seleccionar <a href=\"https:\/\/es.wikipedia.org\/wiki\/Ping%C3%BCino\">ping\u00fcinos<\/a> en tu formulario (\u00bfPor qu\u00e9 ping\u00fcinos? Es s\u00f3lo un ejemplo, no te lo tomes demasiado en serio \ud83d\ude42 ):<\/p>\n\n\n\n<p><code>[checkbox tus-pinguinos \"Ping\u00fcino de Adelia\" \"Ping\u00fcino emperador\" \"Ping\u00fcino pap\u00faa\" \"Ping\u00fcino chico\" \"Ping\u00fcino de Humboldt\" \"Ping\u00fcino roquero austral\" \"Ping\u00fcino de las Gal\u00e1pagos\"]<\/code><\/p>\n\n\n\n<p>Como puede ver en la etiqueta del formulario, <code>tus-pinguinos<\/code> es el nombre del campo y tiene siete opciones de especies de ping\u00fcinos.<\/p>\n\n\n\n<p>Hagamos que permita una selecci\u00f3n de hasta tres opciones a la vez y que muestre un error de validaci\u00f3n cuando se seleccionan m\u00e1s de tres. Usando el tipo de regla predefinida <code><a href=\"https:\/\/github.com\/rocklobster-in\/swv\/tree\/trunk\/rules#maxitems\" data-type=\"URL\" data-id=\"https:\/\/github.com\/rocklobster-in\/swv\/tree\/trunk\/rules#maxitems\">maxitems<\/a><\/code>, puedes implementar esta validaci\u00f3n f\u00e1cilmente. Mira el siguiente fragmento de c\u00f3digo PHP:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\nadd_action(\n    &#039;wpcf7_swv_create_schema&#039;,\n    function ( $schema, $contact_form ) {\n        $schema-&gt;add_rule(\n            wpcf7_swv_create_rule( &#039;maxitems&#039;, array(\n                &#039;field&#039; =&gt; &#039;tus-pinguinos&#039;,\n                &#039;threshold&#039; =&gt; 3,\n                &#039;error&#039; =&gt; &quot;\u00a1Haz seleccionado muchos ping\u00fcinos!&quot;,\n            ) )\n        );\n    },\n    10, 2\n);\n<\/pre><\/div>\n\n\n<p>En este c\u00f3digo, es importante tener en cuenta los siguientes puntos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Debes usar el gancho de acci\u00f3n <code>wpcf7_swv_create_schema<\/code> para a\u00f1adir reglas SWV<\/li>\n\n\n\n<li>El primer par\u00e1metro pasado a la funci\u00f3n de retorno de la acci\u00f3n (<code>$schema<\/code>) es el objeto del schema. Al llamar al m\u00e9todo add_rule() puedes a\u00f1adir una regla al schema.<\/li>\n\n\n\n<li>La funci\u00f3n <code>wpcf7_swv_create_rule()<\/code> crea una regla. El primer par\u00e1metro debe ser uno de los <a href=\"https:\/\/github.com\/rocklobster-in\/swv\/tree\/trunk\/rules#predefined-rule-types\">tipos de reglas predefinidos<\/a>. En este ejemplo, se usa <code>maxitems<\/code>. <\/li>\n\n\n\n<li>El segundo par\u00e1metro pasado a <code>wpcf7_swv_create_rule()<\/code> es una matriz asociativa (array) que representa las propiedades de la regla. Para una regla <code>maxitems<\/code>, las propiedades <code>field<\/code>, <code>threshold<\/code> y <code>error<\/code> deben especificarse.<\/li>\n\n\n\n<li>La propiedad <code>field<\/code> se refiere al nombre del campo a seleccionar. En este ejemplo, es <code>tus-pinguinos<\/code>.<\/li>\n\n\n\n<li>La propiedad <code>threshold<\/code> se refiere al n\u00famero m\u00e1ximo de elementos que puedes seleccionar a la vez. En este ejemplo, hemos establecido <code>3<\/code>.<\/li>\n\n\n\n<li>La propiedad <code>error<\/code> indica el mensaje de validaci\u00f3n que se mostrar\u00e1 cuando la solicitud no cumpla con la regla establecida. En este ejemplo, el mensaje aparecer\u00eda si se seleccionan m\u00e1s de tres ping\u00fcinos.<\/li>\n<\/ul>\n\n\n\n<p>Eso es todo. Con estas diez l\u00edneas de c\u00f3digo, puedes implementar una validaci\u00f3n de entrada de usuario completa que funciona tanto en el lado del servidor como en el lado del cliente. Bastante sencillo, \u00bfverdad?<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"156\" src=\"https:\/\/contactform7.com\/wp-content\/uploads\/validacion-personalizada-de-casillas-de-validacion-1024x156.png\" alt=\"\" class=\"wp-image-49172\" srcset=\"https:\/\/contactform7.com\/wp-content\/uploads\/validacion-personalizada-de-casillas-de-validacion-1024x156.png 1024w, https:\/\/contactform7.com\/wp-content\/uploads\/validacion-personalizada-de-casillas-de-validacion-300x46.png 300w, https:\/\/contactform7.com\/wp-content\/uploads\/validacion-personalizada-de-casillas-de-validacion-768x117.png 768w, https:\/\/contactform7.com\/wp-content\/uploads\/validacion-personalizada-de-casillas-de-validacion.png 1206w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Captura de pantalla de las casillas de verificaci\u00f3n<\/figcaption><\/figure>\n\n\n\n<p>Para confirmarlo, intenta enviar una petici\u00f3n HTTP de tipo GET como la siguiente:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">GET {URL del sitio}\/wp-json\/contact-form-7\/v1\/contact-forms\/{ID del formulario de contacto}\/feedback\/schema<\/pre>\n\n\n\n<p>Si funciona correctamente, encontrar\u00e1s la regla que has a\u00f1adido en la respuesta:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\n{\n        &quot;rule&quot;: &quot;maxitems&quot;,\n        &quot;field&quot;: &quot;tus-pinguinos&quot;,\n        &quot;threshold&quot;: 3,\n        &quot;error&quot;: &quot;\u00a1Haz seleccionado muchos ping\u00fcinos!&quot;\n}\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>En esta receta, aprender\u00e1s a implementar una validaci\u00f3n de entrada de usuario que establece el l\u00edmite m\u00e1ximo de selecci\u00f3n de casillas de verificaci\u00f3n. Esta validaci\u00f3n se basa en el mecanismo Schema-Woven Validation (SWV), por lo que tiene algunas grandes ventajas sobre la validaci\u00f3n anterior basada en filtros, tales como:<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_locale":"es_ES","_original_post":"https:\/\/contactform7.com\/?p=48438","footnotes":"","jetpack_post_was_ever_published":false},"categories":[19],"tags":[31],"class_list":["post-49168","post","type-post","status-publish","format-standard","hentry","category-cookbook","tag-swv","es-ES"],"jetpack_featured_media_url":"","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/posts\/49168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/comments?post=49168"}],"version-history":[{"count":0,"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/posts\/49168\/revisions"}],"wp:attachment":[{"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/media?parent=49168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/categories?post=49168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contactform7.com\/wp-json\/wp\/v2\/tags?post=49168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}