Help: Field Dependency script, require secondary field when shown

I’m looking for some assistance. I have a script that is working with a bootstrap form, which displays and hides dependent fields based on two different select field values (depending on country selected, displays state/province field; depending on reason for contact, displays additional input fields). Currently the form is utilizing browser validation for required fields. The issue is, if a field is required but hidden, the browser still requires a valid value in them and will not submit the form.

Can I add some code to add the required attribute to the secondary fields when shown and remove if hidden to this existing function?

Thanks in advance.

<script type="text/javascript">
            // Field Dependency script
            (function(){ 
                pardot.$(document).ready(function(){
                    (function() {
                        var $ = window.pardot.$;
                    	window.pardot.FormDependencyMap = [
                    	    {"primary_field_html_id":"country","secondary_field_html_id":"state","primary_field_value":"United States"}
                    	    ,{"primary_field_html_id":"country","secondary_field_html_id":"state","primary_field_value":"Canada"}
                    	    ,{"primary_field_html_id":"00N3l00000Q4v09","secondary_field_html_id":"00N3l00000Q4yzK","primary_field_value":"Quote \/ Pricing"}
                    	    ,{"primary_field_html_id":"00N3l00000Q4v09","secondary_field_html_id":"00N3l00000Q4yzK","primary_field_value":"Quality \/ Regulatory"}
                    	    ,{"primary_field_html_id":"00N3l00000Q4v09","secondary_field_html_id":"00N3l00000Q4yzK","primary_field_value":"Technical Specifications"}
                    	    ,{"primary_field_html_id":"00N3l00000Q4v09","secondary_field_html_id":"00N3l00000Q4w1D","primary_field_value":"Order \/ Invoice"}
                    	    ,{"primary_field_html_id":"00N3l00000Q4v09","secondary_field_html_id":"00N3l00000Q4yzF","primary_field_value":"Quote \/ Pricing"}
                    	    ,{"primary_field_html_id":"00N3l00000Q4v09","secondary_field_html_id":"00N1N00000P00mi","primary_field_value":"Quote \/ Pricing"}
                    	    ,{"primary_field_html_id":"00N3l00000Q4v09","secondary_field_html_id":"00N1N00000P00mJ","primary_field_value":"Quote \/ Pricing"}];
                    
                    	$('.form-field-primary input, .form-field-primary select').each(function(index, input) {
                    		$(input).on('change', window.piAjax.checkForDependentField);
                    		window.piAjax.checkForDependentField.call(input);
                    	    });
                        })();
                    });
                })();
        </script>

I have not use this api before. Where does it show which fields are required?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.