{"id":986,"date":"2024-08-12T20:14:00","date_gmt":"2024-08-12T20:14:00","guid":{"rendered":"https:\/\/codenerix.com\/?p=986\/"},"modified":"2025-02-10T05:16:26","modified_gmt":"2025-02-10T05:16:26","slug":"make-a-form-field-conditionally-required-from-another-field-also-dynamicselect","status":"publish","type":"post","link":"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/","title":{"rendered":"Make a Form field Conditionally Required from another field (also DynamicSelect)"},"content":{"rendered":"\n<p>What we are going to explain below is how to link the behaviour of one field to others in a <strong>GenModelForm<\/strong>.<\/p>\n\n\n\n<p>To set conditional behaviour in your fields, the trade-off is that you must tune the fields using <strong>AngularJS<\/strong> code. Since form rendering is not a CPU-bound process, there is no problem with spending a little time rewriting the fields. To do it, we will use a Custom Widget inherited from your desired Form Widget.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Create a custom Widget<\/h2>\n\n\n\n<p>In your app, create a file named widgets.py that contains your custom widget <strong>OptionaTextArea<\/strong> that inherits from <strong>TextArea<\/strong>. So <strong>OptionalTextArea<\/strong> will do the same job as <strong>TextArea<\/strong> right now:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">from django import forms\n\nclass OptionalTextArea(forms.widgets.Textarea):\n    pass<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Override a Widget in your form<\/h2>\n\n\n\n<p>Now, let&#8217;s replace the default widget with our custom <strong>OptionalTextArea<\/strong>. When you need to change the default HTML element used for a form field in a <strong>Django ModelForm<\/strong>, you can override the widgets in the form&#8217;s <strong>Meta class<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"text-decoration: underline;\">To define the widgets dictionary,<\/span> inside the inner Meta class of your <strong>GenModelForm<\/strong>, create a <strong>widgets<\/strong> dictionary.<\/li>\n\n\n\n<li><span style=\"text-decoration: underline;\">Map field names to widgets:<\/span> in this dictionary, map the names of the fields you want to customize to either:\n<ul class=\"wp-block-list\">\n<li>An instance of the desired widget class (e.g., OptionalTextarea(attrs={&#8216;cols&#8217;: 80, &#8216;rows&#8217;: 20}))<\/li>\n\n\n\n<li>The widget class itself (e.g., OptionalTextarea)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>Let&#8217;s say you have an <strong>Author<\/strong> model and want the <strong>bio<\/strong> field to be an <strong>OptionalTextArea<\/strong> instead of the default <strong>TextArea<\/strong> input.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">from codenerix.forms import GenModelForm\nfrom myapp.models import Author\nfrom myapp.widgets import OptionalTextArea\n\nclass AuthorForm(ModelForm):\n    class Meta:\n        model = Author\n        fields = ('name', 'title', 'birth_date', 'bio')\n        widgets = {\n            'bio': OptionalTextArea(attrs={'cols': 80, 'rows': 20}),\n        }\n<\/pre>\n\n\n\n<p>In this example, the name <strong>bio<\/strong> in the form will now be rendered as an <strong>OptionalTextArea<\/strong> with 80 columns and 20 rows. &nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Relax the constraints from the GenModelForm<\/h2>\n\n\n\n<p>Before writing the solution, we must ensure that your <strong>TextField<\/strong> is not mandatory. This can be done inside your model (it will become optional in your form). The main reason is that you are allowing this field not to be filled, so the model should not force us to fill it. In this way, the <strong>GenModelForm<\/strong> won&#8217;t fail when this field is empty.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Customize the OptionalTextArea widget<\/h2>\n\n\n\n<p>Now it is time to work on our OptionalTextArea widget, which is done in 2 steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Inherit&nbsp;from <strong>TextArea<\/strong> to get the typical behaviour from it.<\/li>\n\n\n\n<li>Override the <strong>render()<\/strong> method to request the HTML to the <strong>TextArea<\/strong> widget through the <strong>super()<\/strong> call and then rewrite the HTML as needed. Take into account that the default front end is written with <strong>AngularJS<\/strong>, so any code added must conform to that framework.<\/li>\n<\/ol>\n\n\n\n<p>The source code will look like:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">from django import forms\n\nclass OptionalTextArea(forms.widgets.Textarea):\n\n    def render(self, *args, **kwargs):\n\n        # Get html\n        html = super().render(*args, **kwargs)\n\n        # Transform html\n        html = html.replace(\n            \" id=\",\n            \"ng-required='(selector_field!=undefined)&amp;&amp;(selector_field==\\\"ABC\")||(isNaN(any_other_field))' \"\n            \"ng-invalid='(this.value==undefined)||(this.value.length&lt;=10) '\"\n            \" id=\",\n        )\n\n        print(html)  # For debugging\n\n        return html<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">The code explained<\/h2>\n\n\n\n<p>Here, the render method is overridden to customize how the text area is rendered in HTML. This method is responsible for generating the widget&#8217;s HTML output.<\/p>\n\n\n\n<p>The <strong>html.replace()<\/strong> function modifies the generated HTML. Specifically, it looks for the string <strong>&#8221; id=&#8221;<\/strong> within the HTML and replaces it with additional <strong>AngularJS<\/strong> attributes (<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">ng-required<\/mark> and <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">ng-invalid<\/mark>) followed by <strong>&#8221; id=&#8221;<\/strong>.<br><strong>AngularJS Directives<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">ng-required:<\/mark><\/strong> this directive dynamically sets the required attribute on the text area based on a condition. The condition here checks if the selector_field <strong>is defined<\/strong> and <strong>equal to &#8220;ABC&#8221;<\/strong> or if another field (<strong>any_other_field<\/strong>) <strong>is not a number<\/strong> (isNaN).<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">ng-invalid:<\/mark><\/strong> this directive dynamically sets the invalid attribute based on whether the text area&#8217;s value is undefined or has a length less than or equal to 10 characters.<\/li>\n\n\n\n<li>The &#8221; <strong>id=<\/strong>&#8221; part of the original HTML is kept intact, so the only change is the insertion of the AngularJS directives before it.<\/li>\n<\/ul>\n\n\n\n<p>You should also override the <strong>clean_field() <\/strong>process on your form to check whether the selector has a specific value. This will ensure that you produce a <strong>ValidationError<\/strong> when the <strong>OptionalTextArea<\/strong> is empty or doesn&#8217;t meet the conditions in the front end.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Debugging the HTML generated<\/h2>\n\n\n\n<p>Since AngularJS already render the HTML source code, what you see in the browser may not be what you have returned from the render function. To keep track of your changes and what the browser is getting, you can print out the HTML variable to see its content on the Django console. Comment out this <strong>print()<\/strong> when you are done editing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">DynamicSelect<\/h2>\n\n\n\n<p>It happens that <strong><span style=\"color: #343433;\"><strong><a href=\"https:\/\/github.com\/codenerix\/django-codenerix\"><span style=\"color: #343433;\">CODE<\/span><span style=\"color: #70a8e0;\">NERIX<\/span><\/a><\/strong><\/span><\/strong> is coming with StaticSelect, DynamicSelect, MultiStaticSelect and MultiDynamicSelect, which help to produce selectors.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>StaticSelect and MultiStaticSelect are the usual selectors for <\/strong>which content is sent by the server when the form is rendered. MultiStaticSelect allows several items to be selected; those are rendered using &#8220;<strong>Chips<\/strong>&#8220;.<\/li>\n\n\n\n<li><strong>DynamicSelect and MultiDynamicSelect<\/strong> are new selectors that render content in real-time; once you write in the search box, the server items are requested from the server using the introduced text in the search box. Those are very convenient when talking about a massive list of items inside the selectors because they drastically reduce the overload of the server, rendering many items that may not be used. Instead, you can define how they work using GenForeignKey. This particular kind of selector can send the values from other fields to the server when requesting items so the served items are aware of the context of the form (e.g., a select which Cities depend on a Country selector when a Country is selected to one specific Country, the items returned by the Cities DynamicSelect is reduced to those from that Country). This kind of selector can also overwrite the value from other fields in the same form when the item is selected. We can say they work bi-directionally. If you are willing to know how this kind of selector works, please visit: <a href=\"https:\/\/codenerix.com\/en\/genform-with-autofill\/\">GenForm with Autofill<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>What we are going to explain below is how to link the behaviour of one field to others in a GenModelForm. To set conditional behaviour in your fields, the trade-off is that you must tune the fields using AngularJS code. Since form rendering is not a CPU-bound process, there is no problem with spending a [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":990,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[20],"tags":[],"class_list":["post-986","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-howto"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Make a Form field Conditionally Required from another field (also DynamicSelect) - Codenerix<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make a Form field Conditionally Required from another field (also DynamicSelect) - Codenerix\" \/>\n<meta property=\"og:description\" content=\"What we are going to explain below is how to link the behaviour of one field to others in a GenModelForm. To set conditional behaviour in your fields, the trade-off is that you must tune the fields using AngularJS code. Since form rendering is not a CPU-bound process, there is no problem with spending a [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/\" \/>\n<meta property=\"og:site_name\" content=\"Codenerix\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-12T20:14:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-10T05:16:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/08\/web_forms.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2880\" \/>\n\t<meta property=\"og:image:height\" content=\"1620\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Codenerix\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Codenerix\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/\"},\"author\":{\"name\":\"Codenerix\",\"@id\":\"https:\/\/codenerix.com\/#\/schema\/person\/c1dce0f30541a2be119ee8adc332a9af\"},\"headline\":\"Make a Form field Conditionally Required from another field (also DynamicSelect)\",\"datePublished\":\"2024-08-12T20:14:00+00:00\",\"dateModified\":\"2025-02-10T05:16:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/\"},\"wordCount\":915,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/08\/web_forms.png\",\"articleSection\":[\"Howto\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/\",\"url\":\"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/\",\"name\":\"Make a Form field Conditionally Required from another field (also DynamicSelect) - Codenerix\",\"isPartOf\":{\"@id\":\"https:\/\/codenerix.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/08\/web_forms.png\",\"datePublished\":\"2024-08-12T20:14:00+00:00\",\"dateModified\":\"2025-02-10T05:16:26+00:00\",\"author\":{\"@id\":\"https:\/\/codenerix.com\/#\/schema\/person\/c1dce0f30541a2be119ee8adc332a9af\"},\"breadcrumb\":{\"@id\":\"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/#primaryimage\",\"url\":\"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/08\/web_forms.png\",\"contentUrl\":\"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/08\/web_forms.png\",\"width\":2880,\"height\":1620},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codenerix.com\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Make a Form field Conditionally Required from another field (also DynamicSelect)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codenerix.com\/#website\",\"url\":\"https:\/\/codenerix.com\/\",\"name\":\"Codenerix\",\"description\":\"Framework libre Open Source\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codenerix.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codenerix.com\/#\/schema\/person\/c1dce0f30541a2be119ee8adc332a9af\",\"name\":\"Codenerix\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codenerix.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/dee2772994eb5d89e57afac281bca674800da15c6c32fba528dea162570d644d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/dee2772994eb5d89e57afac281bca674800da15c6c32fba528dea162570d644d?s=96&d=mm&r=g\",\"caption\":\"Codenerix\"},\"url\":\"https:\/\/codenerix.com\/en\/author\/codenerix\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Make a Form field Conditionally Required from another field (also DynamicSelect) - Codenerix","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/","og_locale":"en_US","og_type":"article","og_title":"Make a Form field Conditionally Required from another field (also DynamicSelect) - Codenerix","og_description":"What we are going to explain below is how to link the behaviour of one field to others in a GenModelForm. To set conditional behaviour in your fields, the trade-off is that you must tune the fields using AngularJS code. Since form rendering is not a CPU-bound process, there is no problem with spending a [&hellip;]","og_url":"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/","og_site_name":"Codenerix","article_published_time":"2024-08-12T20:14:00+00:00","article_modified_time":"2025-02-10T05:16:26+00:00","og_image":[{"width":2880,"height":1620,"url":"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/08\/web_forms.png","type":"image\/png"}],"author":"Codenerix","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Codenerix","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/#article","isPartOf":{"@id":"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/"},"author":{"name":"Codenerix","@id":"https:\/\/codenerix.com\/#\/schema\/person\/c1dce0f30541a2be119ee8adc332a9af"},"headline":"Make a Form field Conditionally Required from another field (also DynamicSelect)","datePublished":"2024-08-12T20:14:00+00:00","dateModified":"2025-02-10T05:16:26+00:00","mainEntityOfPage":{"@id":"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/"},"wordCount":915,"commentCount":0,"image":{"@id":"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/#primaryimage"},"thumbnailUrl":"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/08\/web_forms.png","articleSection":["Howto"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/","url":"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/","name":"Make a Form field Conditionally Required from another field (also DynamicSelect) - Codenerix","isPartOf":{"@id":"https:\/\/codenerix.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/#primaryimage"},"image":{"@id":"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/#primaryimage"},"thumbnailUrl":"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/08\/web_forms.png","datePublished":"2024-08-12T20:14:00+00:00","dateModified":"2025-02-10T05:16:26+00:00","author":{"@id":"https:\/\/codenerix.com\/#\/schema\/person\/c1dce0f30541a2be119ee8adc332a9af"},"breadcrumb":{"@id":"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/#primaryimage","url":"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/08\/web_forms.png","contentUrl":"https:\/\/codenerix.com\/wp-content\/uploads\/2024\/08\/web_forms.png","width":2880,"height":1620},{"@type":"BreadcrumbList","@id":"https:\/\/codenerix.com\/en\/make-a-form-field-conditionally-required-from-another-field-also-dynamicselect\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codenerix.com\/en\/"},{"@type":"ListItem","position":2,"name":"Make a Form field Conditionally Required from another field (also DynamicSelect)"}]},{"@type":"WebSite","@id":"https:\/\/codenerix.com\/#website","url":"https:\/\/codenerix.com\/","name":"Codenerix","description":"Framework libre Open Source","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codenerix.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codenerix.com\/#\/schema\/person\/c1dce0f30541a2be119ee8adc332a9af","name":"Codenerix","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codenerix.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/dee2772994eb5d89e57afac281bca674800da15c6c32fba528dea162570d644d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dee2772994eb5d89e57afac281bca674800da15c6c32fba528dea162570d644d?s=96&d=mm&r=g","caption":"Codenerix"},"url":"https:\/\/codenerix.com\/en\/author\/codenerix\/"}]}},"_links":{"self":[{"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/posts\/986","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/comments?post=986"}],"version-history":[{"count":7,"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/posts\/986\/revisions"}],"predecessor-version":[{"id":998,"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/posts\/986\/revisions\/998"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/media\/990"}],"wp:attachment":[{"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/media?parent=986"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/categories?post=986"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codenerix.com\/en\/wp-json\/wp\/v2\/tags?post=986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}