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>