[Resolved] Style Featured Images required error message in CRED as custom field errors

[Author]

Posts

[lindsayH]

I have added some code (see below) to my functions.php and all works in so far as you cannot submit the CRED form if a Featured Image is not uploaded. I was just wondering though if there was an easy way for the error message to look as the other error messages I get on a custom field which are required. These appear next to the field themselves, whereas the Featured Image error is placed at the bottom of the CRED form. Please see image attached for an example of both errors.

/**
* Make Featured Image on CRED forms required
*/

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

[Luo Yang]

Dear Lindsay,

By default, the CRED form will display the error message within the area of shortcode [cred_field field='form_messages' value='' class='alert alert-warning'].

I suggest you edit your CRED form place above shortcode into there you want, and I just test your custom PHP codes in my localhost, it does work, it display an error message in the head of CRED form, in the area of shortcode [cred_field field='form_messages' value='' class='alert alert-warning'].

[lindsayH]

Yes, I think may be I haven't been clear. I want the error message to display as all the other inline errors - because as it stands at the moment I have two types of error messages which is confusing to the user. See my image in the original post. I DO NOT want the error message to display at the bottom (as your solution would create elsewhere), but I would like the error message for the Featured Image (that is created with the code in the original message), to display inline (as my T&Cs do). Is this possible?

Another example in the attached image, I'd like the Main Image (Featured Image) to display an error as the other fields do.

Many thanks, Lindsay

[Luo Yang]

Thanks for the details, since you are using the custom codes to setup the error message of field "_featured_image".
Unlike other custom field, CRED handles the "_featured_image" field in a special way, the error message won't be able to display as all the other inline errors,
So there ins't such a built-in feature within CRED form, if you agree, we can take it as a feature request, our developers will evaluate it.

[lindsayH]

I think this would be useful, so yes would definitely agree to it being put forward as a Feature Request.

Many thanks, Lindsay.

[lindsayH]

PS... just in case useful. I did try this solution, but it no longer appears to work.

https://toolset.com/forums/topic/how-to-make-the-cred_field-_featured_image-required/#post-513975

[Luo Yang]

The JS workaround is outdated, you will need to modify it, for example:

jQuery(function( $ ) {
  
  // Validation
  $( 'input.wpt-form-submit' ).click( function(event) {
    //remove previous error
    $( 'label[for="_featured_image_hidden"] label.wpt-form-error' ).remove();
    // content
    if ( $( "#_featured_image_hidden" ).val() == '' ) {
        $( "#_featured_image_file" ).focus();
        $( 'label[for="_featured_image_hidden"]' ).prepend( '<label class="wpt-form-error">The featured image is required.</label>' );
        event.preventDefault();
    }
  
  } );
     
} );

It is only an example, you will need to customize it according to your own website.

[lindsayH]

OK, I guess I need to create DIVs for _featured_image_hidden and _featured_image_file - but I can't see what I'd put in the DIVs. This is the code I have on the CRED form currently.

	
		<div class="cred-field cred-field-_featured_image">
			<label class="cred-label">
Main Image
</label>
			[cred_field field='_featured_image' post='wedding-supplier' value='' urlparam='' output='bootstrap']
		</div>

Don't worry if this is outside your remit. I would hope that this will go forward in a Feature Request and I can wait until then.

[Luo Yang]

It has already been filed in feature request list, our developers will evaluate it. You can subscribe to our blog to get the updated news:
https://toolset.com/blog/

[lindsayH]

Thank you, I have already subscribed.

Thanks for your help. Lindsay