Custom Fields and jQuery Validation

This topic has 3 replies, 2 voices, and was last updated 3 weeks, 6 days ago by Peter.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts

December 22, 2024 at 6:28 PM #47218

Participant

Hi,

when creating a custom field input for the front end forms, is there a way to use the metabox form validation with the field input? e.g. check its empty. I set required to true, but this dont work either. I am not after custom validation, just to check the field is not empty when the form is submitted.

class RWMB_dc_price_Field extends RWMB_Field { 
		
	public static function html( $meta, $field ) {

		return sprintf(
			$html = '
				<div class="rwmb-input-group"><span class="rwmb-input-group-text">' . $prepend . '</span><input class="" id="' . $uniqueID . '" required="' . $required . '" type="number" title="' . $field['field_name'] . '" value="' . $meta . '" placeholder="' . $placeholder . '" name="%s" min="' . $priceMin . '" max="' . $priceMax .'" step="' . $priceStep . '" ><span class="rwmb-input-group-text">' . $append . '</span></div>',
			$field['field_name'], 
			//$field['id'], 
			$meta
		);
	}
}

December 23, 2024 at 10:56 PM #47224

Peter

Moderator

Hello Nick,

I create a custom field type following the documentation https://docs.metabox.io/creating-new-field-types/

and I can use the jQuery validation, frontend filter validation properly. Here is the example code:

add_filter( 'rwmb_meta_boxes', function ( $meta_boxes ) {
    $meta_boxes[] = [
        'title'      => 'Profile',
        'id'         => 'post-profile',
        'post_types' => 'post',
        'fields'     => [
            [
                'name' => 'Hotline',
                'id'   => 'hotline',
                'type' => 'phone',
                
            ],
        ],
        'validation' => [
            'rules'  => [
                'hotline' => [
                    'required'  => true,
                    'minlength' => 7,
                ],
                // Rules for other fields
            ],
            'messages' => [
                'hotline' => [
                    'required'  => 'hotline is required',
                    'minlength' => 'hotline must be at least 7 characters',
                ],
                // Error messages for other fields
            ],
        ],
    ];

    return $meta_boxes;
} );

add_filter( 'rwmb_frontend_validate', function( $validate, $config ) {
    // Check if users have selected files for an image upload field.
    if ( empty( $_POST['hotline'] ) ) {
        $validate = 'Please add a phone number';
    }
    return $validate;
}, 10, 2 );

December 24, 2024 at 6:33 PM #47229

Nicholas Cox

Participant

I tried this and it used to work about 6 months ago, but now i have checked every setting and the Jquery front end does not validate with custom fields? I created a new custom field using your code above 'hotline' but it adds the required asterisks to the label etc when using the validation rules but there is no error message displayed when submitting the form?

I have also tried this with the the following setup and it does not work either (as previously mentioned)

class RWMB_dc_price_Field extends RWMB_Field { 
		
	public static function html( $meta, $field ) {

		return sprintf(
			$html = '
				<div class="rwmb-input-group"><span class="rwmb-input-group-text">' . $prepend . '</span><input class="" id="' . $uniqueID . '" required="' . $required . '" type="number" title="' . $field['field_name'] . '" value="' . $meta . '" placeholder="' . $placeholder . '" name="%s" min="' . $priceMin . '" max="' . $priceMax .'" step="' . $priceStep . '" ><span class="rwmb-input-group-text">' . $append . '</span></div>',
			$field['field_name'], 
			//$field['id'], 
			$meta
		);
	}
}

thanks

December 24, 2024 at 11:40 PM #47234

Peter

Moderator

Hello,

Please share your site admin account by submitting this contact form https://metabox.io/contact/
I will take a look.

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.