Disabled option for select fields

• BobDiego

• August 23, 2017 at 1:17 am

This will probably be a feature request not how-to or bug. I wanted to create a concise layout for a specific form by eliminating the label and having a disabled select option visible on page load, which instructs the user what is required (essentially, a placeholder for the select field).

It appears ACF does not have an option for a disabled option in a select field, which would be ideal (and if this true, is a feature request).

In my specific case, I’ve added an “occupation” select field on the registration form. This form is native to WordPress, which means I can’t generate a custom field using the acf_form() function. I don’t know if you can configure disabled select options by PHP, but since the form is native, that eliminates that option.

Another option is to add the field on load with JavaScript, and while that would work great, it would leave the form without that field option if the user has JS disabled.

A slightly different approach would be to add a dummy select option from the backend which includes the instruction (“select your occupation”) and then use JavaScript to disable that option on page load. I’ve tried this and at least in Chrome, the user can still hit “submit” and the form will submit with the disabled field. This is a required field, so this option allows the form to be submitted with the placeholder field selected, which is of course, no bueno.

Am I missing the way to achieve this through standard configurations? I didn’t see a plugin extension for that type of field, and found no solution that hits this purpose squarely on the head.

Thanks for the awesome plugin!

• John Huebner

• August 23, 2017 at 9:53 am

I’m assuming that you are using ACF4 because you indicate that you cannot add field to the user registration form. ACF5 can add custom fields to the user registration form.

ACF5 does not however have a way to add a disabled option in the select field.

I think that this can be simulated by setting the field to required and to not allow null values and then using an acf/load_field filter to insert a null entry into the beginning of the selections https://www.advancedcustomfields.com/resources/dynamically-populate-a-select-fields-choices/. While the first item would be selective, validation would fail submitted with it selected. I haven’t tested this, but it seems like it should work.

• BobDiego

• August 23, 2017 at 10:17 am

I am using ACF Pro (5) and am adding fields to the registration form, but via the backend.

You’re suggesting adding say “NULL : Option 1” in the select option list, and then checking “NULL not allowed”. Very clever – but I don’t seem to be able to format the option with the value NULL. I used this exact format:

NULL : Option 1

Can you advise how to make a drop-box select option “NULL”?

• John Huebner

• August 23, 2017 at 10:37 am

I’m suggesting adding a to the field choices for example

$field['choices'] = array(
  '' => 'This value is NULL'.
  1 => 'This is a valid value'
);

Any array index of ” does work in PHP and this is what ACF uses for the value. The rest of it should be handled by ACF. The empty string index cannot be added through the ACF field setting, but I think it could be added in PHP.

….

But your idea will work as well. You can have a set of values in the field settings like

not allowed : select your occupation
butcher
baker
candle stick maker

Then you can create an acf/validate_value filter for your field that displays an error if that value is selected https://www.advancedcustomfields.com/resources/acf-validate_value/

• BobDiego

• August 24, 2017 at 3:18 am

The validate function would be a great solution – however, this custom field is injected in the user registration form, so it doesn’t seem to trigger the validation functions.

I could be wrong (maybe misconfigured function) but if I’m right, you might want to consider hooking your validation function into the registration form, since adding fields to the user_form = registration is a built-in feature of your system.

I was able to validate the field (and trigger the native WP registration errors) through the registration_errors() hook. However, that brings me to a different problem.

When I var_dump the $_POST variable in this function, it includes the data I want, but it’s attached to an obscure field_ key:

array(10) {
  ["user_login"]=>   string(11) "johnsmith"
  ["user_email"]=>   string(23) "[email protected]"
  ["_acf_post_id"]=>   string(6) "user_0"
  ["_acf_nonce"]=>   string(10) "8294e063ae"
  ["_acf_validation"]=>   string(1) "1"
  ["_acf_ajax"]=>   string(1) "0"
  ["_acf_changed"]=>   string(1) "1"
  ["acf"]=>
  array(1) {
    ["field_5999b7f405d29"]=>
    string(11) "Candlestick Maker"
  }
  ["redirect_to"]=>   string(27) "https://example.com/welcome"
  ["wp-submit"]=>   string(8) "Register"
}

I can validate that field (in your solution, check against “not allowed”). But I’m unclear on how to access this field_ key value (in this case, “field_5999b7f405d29“). I can do a var_dump like this and see it, I could reverse engineer it from the database, but is there a way to get that key that’s more intuitive and portable?

* Note the user_ ID is not established at this point, so I can’t, for example, access the field like so:

get_field('occupation', 'user_22');

• John Huebner

• August 24, 2017 at 4:49 am

Every field in ACF has a field key. It is unique for every field created and remains the same. The reason for this is that field names can be duplicated. ACF uses the field keys in instead of the names in all of it’s forms. When editing a field group you can see the field keys if you click on Screen Options in the upper right and then check Field Keys.

The validation for the ACF field is included on the user registration form, but you have to build your own validation filter. https://www.advancedcustomfields.com/resources/acf-validate_value/