"Required" settting for image field does not work if text input is hidden

Resolved wpfan1000
(@wpfan1000)

8 years, 8 months ago
Hi,

I am just learning CMB2 and really like it.

I have the following code for an image field:
```
$cmb->add_field( array(
		'name' => __( 'Test Image', 'cmb2' ),
		'desc' => __( 'Upload an image or enter a URL.', 'cmb2' ),
		'id'   => $prefix . 'image',
		'type' => 'file',

    'attributes'  => array(
        'required'    => 'required',
    ),

    'options' => array(
        'url' => false, // Hide the text input for the url
        'add_upload_file_text' => 'Add File' // Change upload button text. Default: "Add or Upload File"
    ),

	) );
```
As you can see the input url field is hidden.

Since the input field for the url is editable by the user, I cannot have it shown or editable by the user. A user could select an image using the Browse button, and then corrupt the url by accidentally editing it in the url field.

My understanding is that currently CMB2 is using the browser’s “required” functionality to direct a user to a field that is required, if the field is not filled in when the Update button is clicked.

Because the url input field is hidden, it seems that if the image is not set, then the browser does not have a field to go to, and the “required” setting does not seem to work.

Is there any way to resolve this?

Thanks ahead of time.

https://wordpress.org/plugins/cmb2/

Viewing 15 replies - 1 through 15 (of 16 total)

1 2 →

Plugin Contributor Michael Beckwith
(@tw2113)

The BenchPresser

8 years, 8 months ago
I have to believe that it was done on purpose that way.

I think a better route to try out would be passing in the disabled attribute. It’d prevent people from being able to edit the field but still use the button. Worth trying out.
```
'attributes'  => array(
	'required'    => 'required',
	'disabled'    => 'disabled'
),
```
Plugin Author Justin Sternberg
(@jtsternberg)

8 years, 8 months ago

html5 does not really support setting a non-visible field as required. You’ll be better off doing some custom JS validation.

Thread Starter wpfan1000
(@wpfan1000)

8 years, 8 months ago

Hi Michael and Justin, thanks for getting back to me.

Unfortunately, I have never written JS, and I also would have no idea as to how to incorporate that into CMB2, if it needs to be.

I am creating membership based sites, where it is critical that the user does for example supply at least one image on their post, hence the requirement for “required” on this field. Otherwise we will be emailing 1000’s of users asking them to upload at least one image.

And the image field would have to not show the url text field because it could be accidentally or maybe maliciously modified.

I hate to compare, and I don’t mean any offense or imply ACF is better (I am evaluating CMB2 and Pods for some very good reasons) but ACF has 1) A dedicated image field with no URL text field, and 2) It does use I presume JS to highlite that field if it is set to required and no image is selected.

IMHO I see only risk and no advantages to having a URL field with an image. Again a user could hack it or corrupt it, and a user uploading a picture has no need to know the url.

Major sites like craiglist, kijiji, etc do not show a url field I think for the reasons mentioned.

It seems CMB2 is using a File field for an Image field, also IMHO it would be great to have a dedicated image field without a url text field.

Obviously CMB2 is a well respected system used by developers, and I imagine many have the same requirements as me for some projects.

Just for my understanding, could you explain why CMB2 does not have JS validation?

If it due to not having had time to develop it, could I try and work with CMB2 to try and develop a standard?

Also would it not be better to use a common validation UI as you mention here?
https://github.com/WebDevStudios/CMB2/issues/352
Plugin Author Justin Sternberg
(@jtsternberg)

8 years, 8 months ago
And the image field would have to not show the url text field because it could be accidentally or maybe maliciously modified.

You can remove the url field as demonstrated by your code snippet above:
```
'options' => array(
		'url' => false, // Hide the text input for the url
		'add_upload_file_text' => 'Add File' // Change upload button text. Default: "Add or Upload File"
	),
```
I hate to compare, and I don’t mean any offense or imply ACF is better (I am evaluating CMB2 and Pods for some very good reasons) but ACF has 1) A dedicated image field with no URL text field, and 2) It does use I presume JS to highlite that field if it is set to required and no image is selected.

ACF IS better in a lot of ways. ACF and CMB2 are similar tools, but have dissimilar goals/philosophies. CMB2 is open-source, free, and community-built.

IMHO I see only risk and no advantages to having a URL field with an image. Again a user could hack it or corrupt it, and a user uploading a picture has no need to know the url.

Major sites like craiglist, kijiji, etc do not show a url field I think for the reasons mentioned.

Again, this is configurable. We’ll not be removing and risk breaking backwards compatibility for those who DO use/appreciate the feature.
You’re also using it on the front-end which is supported but comes with its own set of liabilites.

Obviously CMB2 is a well respected system used by developers, and I imagine many have the same requirements as me for some projects.

Just for my understanding, could you explain why CMB2 does not have JS validation?

If it due to not having had time to develop it, could I try and work with CMB2 to try and develop a standard?

Also would it not be better to use a common validation UI as you mention here?
https://github.com/WebDevStudios/CMB2/issues/352

Again, CMB2 is community-built and maintained by us at WDS. JS validation is less needed/common than you might think, especially with html5 attributes. I’m not opposed to it (as mentioned in the github issue you highlighted), but I will not be building it in until a WDS or personal project requires it. The community benefits from the hard work and development that the team at WDS puts into CMB2 (as well as contributions by other individuals/entities).

ACF, Pods and CMB2 all have their strong points. It’s up to you to determine which tool best fits the job.
Plugin Author Justin Sternberg
(@jtsternberg)

8 years, 8 months ago

Also would it not be better to use a common validation UI as you mention here?

The common validation UIs mentioned there ARE JS validation techniques. Same concept/idea.

Thread Starter wpfan1000
(@wpfan1000)

8 years, 8 months ago

Hi Justin,

I appreciate your prompt response and taking the time to explain things.

I hope you don’t mind me asking all these questions – I am a grateful user of plugins and not a developer, and so my questions may be uninformed but hopefully not annoying.

Regarding keeping the URL text field with the image field for backwards compatibility, I totally appreciate that – the main reason I am evaluating other custom field solutions is because I am very concerned about backwards compatibility of another plugin.

Also as you point out, the URL text field can be hidden. Again being a noob, especially to JS validation, I had assumed that it would be necessary to show this field in order for JS validation to work to determine if the field had be used/set/filled in. I am now going to learn JS validation so that I can apply it to CMB2 fields as required.

Also thanks for pointing out JS validation is not needed all the time on all projects. I had assumed wrongly that it was needed by most users, hence me expressing my opinion it should be part of the plugin. If it is not commonly needed, I canunderstand why you would not include it and I am happy to learn how to do it myself for my sites.

Thread Starter wpfan1000
(@wpfan1000)

8 years, 8 months ago

As mentioned in another post, for me, more as a user than a developer, CMB2 not having validation that is similar to ACF is a show-stopper for me, because I don’t have any idea how to do that.

However I am willing to put in the time and effort to learn how to do so, and have already spent hours trying to figure it out, but have gotten no-where.

I think it is because there are too many articles out there about validation – PHP, JS, JQuery, server side, client side, etc…..

To be clear, when I say similar to ACF, I mean a message at the top of the editing screen that says a user needs to fill in some fields below, and a highlighting of the full box that contains a specific field that has not been filled in.

For me, I need a CMB2 file/image field without the URL text box to be “required” validated, as well as the CMB2 Google maps add-on.

Could you please point me the way to some sample code, plugin or suggest some specific ways of going about this?

Thanks

Plugin Author Justin Sternberg
(@jtsternberg)

8 years, 8 months ago

I added an example to the snippet library. it’s pretty basic, and won’t work for all scenarios. I don’t know if it’s close to what you’re looking for or if you’ll know how to tweak it if not, but it’s here for your reference: https://github.com/WebDevStudios/CMB2-Snippet-Library/blob/master/javascript/cmb2-js-validation-required.php

Thread Starter wpfan1000
(@wpfan1000)

8 years, 8 months ago

Justin, thank you VERY much for providing this snippet. It is a huge help for me because 1) It shows a general approach ie which language to use, and 2) Sample code.

It will take me some time to learn it but it is a big step in the right direction for me.

Thanks!

Thread Starter wpfan1000
(@wpfan1000)

8 years, 8 months ago

Dear Justin,

I activated the code as a plugin and it is EXACTLY what I wanted! Thanks again!

Moreover, I added the CMB2 Google map plugin, activated it, added the “required” attribute to it and your js validation WORKS as well for this field. Amazing!

This over comes a huge stumbling block for me to use CMB2.

Now I would like to make the following suggestions and offer to help:

1)
It seems to me that the js required validation code is generic and not specific to a certain post type, field group, or set of fields – ie it can be used for any custom post type and field set.

Is this correct?

If so I would like to propose that I test this by creating a plugin just for “required” validation and contribute that on github? And create some documentation for it. Would that be helpful?

I realize and understand that you as a developer may nor may not require this validation on all projects and so it is not a critical component for you.

However, me, as a user coming ACF, where js required validation is built in and seems to be a default and normal part of a field group (I am not sure you can even disable it) going to CMB2, it feels like CMB2 is missing this feature and it is an important one. So I think that other users who have used ACF in the past may feel the same way, and if they are able to simply activate a plugin with CMB2, it may be very helpful for them.

2)
I also learned that I can put code to create fields in a plugin. Likely pretty obvious and mentioned somewhere already, but I had just been following the Getting started section of CMB2, where field code is put into functions.php. I would like to add that as documentation and provide an example, if that would be helpful.

btw I am a semi-retired professional engineer and former professor in robotics, and so I have had some practice in developing instructional materials 🙂

Plugin Author Justin Sternberg
(@jtsternberg)

8 years, 8 months ago

It seems to me that the js required validation code is generic and not specific to a certain post type, field group, or set of fields – ie it can be used for any custom post type and field set.

Is this correct?

That is correct, though I didn’t test every field type, and it probably won’t work on every type out of the box.

If so I would like to propose that I test this by creating a plugin just for “required” validation and contribute that on github? And create some documentation for it. Would that be helpful?

We love community projects and endorse them.

I would like to add that as documentation and provide an example, if that would be helpful.

We would love that.

Thread Starter wpfan1000
(@wpfan1000)

8 years, 8 months ago

Hi Justin,

I added a page on the CMB2 wiki describing the plugin code for validation.

I did not add a plugin on Github, just sample code. I hope that is ok. Not sure if I could maintain a plugin…

And on
https://github.com/WebDevStudios/CMB2/wiki/Basic-Usage
I added:

Creating the metabox using a plugin

You can also create the metabox by creating a standard WordPress plugin and simply pasting the above code below the header of the plugin.

Please let me know what you think. I am happy to make changes.

Plugin Author Justin Sternberg
(@jtsternberg)

8 years, 8 months ago

I really like the page/documentation you added.

I remove the actual code and instead linked to the snippet library code, that way the snippet can be continuously updated as needed. I also modified the snippet to remove the sample fields, and added a documentation link back to the wiki. Thanks so much for doing that.

I like the change to the basic usage doc as well. We appreciate any and all documentation updates, so thanks for taking the time to do that!

Thread Starter wpfan1000
(@wpfan1000)

8 years, 8 months ago

Hi Justin,

I think you have created a great system and I am glad to be able to help out a bit.

Today I tried that sample JS validation code with a radio and multi_check field and the code does not seem to work.

If I use ‘required’ => ‘required’ then CMB2’s built in validation does work, but ‘data-validation’ => ‘required’, does not work.

Unfortunately I do not know enough about JS nor how one detects that a field is not filled in, and so I am not able to make changes to the sample plugin code to handle these fields.

This leaves me unfortunately once again in a spot where I can’t continue using CMB2 for my next project unless these fields and maybe some others can work with JS validation.

I imagine you have a massive amount of priorities for CMB2, but would it be possible for someone from the CMB2 team to modify the JS validation code?

Plugin Author Justin Sternberg
(@jtsternberg)

8 years, 8 months ago

I imagine you have a massive amount of priorities for CMB2, but would it be possible for someone from the CMB2 team to modify the JS validation code?

Unfortunately it’s a side-project for us, and a labor of love for me. It’s likely that the minute we need this functionality for a client project, this will be a top priority. But until then, there’s not a lot we can do. I know there are other parties interested in making this happen as well (the Pods team for example), it will likely happen eventually, but I make no guarantees as to when. I suggest/recommend you hire somebody who can handle this for you if you want to continue using CMB2 in this way.

Viewing 15 replies - 1 through 15 (of 16 total)

1 2 →

The topic ‘"Required" settting for image field does not work if text input is hidden’ is closed to new replies.