[Resolved] How to make taxonomy field required and add default option to taxonomy dropdown on Toolset form

[Author]

Posts

[karenZ]

Hello,
We have several taxonomy fields in our CRED form, which currently show the first taxonomy selection automatically. This could cause issues if people forget to change it before submitting their form.

Can you please advise how to show "Select One" as the default in the taxonomy dropdown - instead of the first taxonomy option? Secondly, how can we set the Taxonomy Dropdown field to be required?

You can see an example in the attached screenshots.

On this form we have a "Parade City" form, which is automatically selecting "Baton Rouge" as the answer because it is the first city in the list. We need it to select NO option automatically and instead show text to "Select One". But also make the field required, so that one city must be selected in order to submit the form.

[Minesh]

Hello. Thank you for contacting the Toolset support.

To add the default option to your taxonomy dropdown, you will require to add the custom jQuery/Javascript code. Please check the following related ticket that may help you:
- https://toolset.com/forums/topic/drop-down-list-of-taxonomies-first-choice/

To make the taxonomy field required, you will again have to add custom JS code.

For example:
- The following code will add the default option "Select One" and add the required validation rule to the taxonomy "student-type". You can change the taxonomy slug where applicable with the following code.

jQuery(document).ready(function($){
  
jQuery("select[name='student-type[]']").prepend('<option value="">-Select One-</option>');
jQuery("select[name='student-type[]']")[0].selectedIndex = 0;
  
});

jQuery(document).on('cred_form_ready', function() {
      
  jQuery('[name="student-type[]"]').addClass('js-wpt-validate');
    
  jQuery.validator.addClassRules("js-wpt-validate", {
    required: true,
   });
    
});

[karenZ]

Hello,
I've added the JS code to my form, and the "Select One" is working correctly. However, the validation is causing an error.

Instead of making only that taxonomy field required, it is requiring several other fields to suddenly be required too. Even though those fields are not set to "Required". See attached screenshot and the multiple "This field is required" messages that are suddenly being added.

Can you confirm if there is any additional code I need to add or if my code is not written correctly?

[Minesh]

Can you please try to use the following JS code:

jQuery(document).on('cred_form_ready', function() {
       
   jQuery('[name="city[]"]').rules( "add", {
  required: true
});

});

I hope this will fix the issue.

[karenZ]

I've updated the JS with the revised code you provided, see below my full code. But when I tested the form it did NOT validate the "City" field - the error message saying "This Field is Required" did not appear. It did resolve the previous issue of multiple fields being required. Can you advise if the code is correct?

jQuery(document).ready(function($){

jQuery("select[name='city[]']").prepend('<option value="">Select One</option>');
jQuery("select[name='city[]']")[0].selectedIndex = 0;

});

jQuery(document).on('cred_form_ready', function() {

jQuery('[name="city[]"]').rules( "add", {
required: true
});

});

[Minesh]

Can you please try to delete the browser cache and check once again.

If it still does not work, please share problem URL and admin access details.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

I've adjusted the code as given under:

jQuery(document).on('cred_form_ready', function() {
   jQuery('[name="city[]"]').addClass('js-wpt-validate');   
   jQuery('[name="city[]"]').rules( "add", {
  required: true
});
 
});

I can confirm its working as expected at this end. Can you please confirm it works at your end as well.

[karenZ]

My issue is resolved now. Thank you!