[Resolved] How to make the cred_field '_featured_image' required

[Author]

Posts

[Pat]

Hello,

I have created a Cred form and wants to integrate the feature image. So I place this code :

[cred_field field='_featured_image' value='' urlparam='' required='true']

but the field is not recognized as "required".
What do I need to do for that?
Regards
Pat

[Arvish Mungur]

Hello Pat,

Thank you for contacting Toolset Support.

I will be happy to help you with your issue.

Please add the following code to your theme’s functions.php file and replace ‘YOUR_FORM_ID’ with ID of your CRED form:

You can obtain the ID of the CRED form by going to Toolset > Post Forms
hidden link

function my_cred_validation($field_data, $form_data) {
    list($fields,$errors)=$field_data;
 
    if ($form_data['id'] == YOUR_FORM_ID) {
         
        if ( empty($fields['_featured_image']['value']) ) {
            $errors['_featured_image']='This field is required';
        }
    }
 
    return array($fields,$errors);
}
add_filter('cred_form_validate', 'my_cred_validation', 10, 2);

Please let me know if this helps.

Kind regards

[Pat]

Hi Arvish,

Thanks for the answer.
That works but the only point I can see is that in this case,the way the validation works is not the same as the one for the other fields that are managed with the standard required validation.
This could be an issue for users as they will face 2 types of error messages in the same form.

I would prefer to be able to integrate this validation as standard within Toolset. Could you pass this request to the development team in order to see if this is something feasible (and not only for this specific field, but also for all fields that are not currently covered by standard validation within Toolset).

Regards
Pat

[Arvish Mungur]

Hello Pat,

Thank you for elaborating.

Please add the following JS code to the JS section located just below the content editor of your CRED form:

hidden link

jQuery(function( $ ) {
 
  // Validation
  $( 'form.cred-form' ).submit( function() {
    //remove previous error
    $( ".cred-field-_featured_image .js-wpt-field-items .wpt-form-error" ).remove();
    // content
    if ( $( "#_featured_image_file" ).val() == '' ) {
        $( "#_featured_image_file" ).focus();
        $( ".cred-field-_featured_image .js-wpt-field-items" ).prepend( '<label class="wpt-form-error">The featured image is required.</label>' );
        return false;
    }
 
  } );
    
} );

And add the following CSS to the CSS section:

.cred-field-_featured_image .js-wpt-field-items .wpt-form-error{
    display: block !important;
}

Let me know if this fixes the issue.
Kind regards

[Pat]

Hi Arvish,

Sounds good.
Many thanks
Pat