Validating Custom Meta Box Values & Required Fields

Question

Something which I have never seen covered is the best way to validate that specific form fields are filled out correctly for custom post type meta boxes.

I am looking to get expert opinions on how best to validate custom fields for any metaboxes that one might create. My interest are to:

• ensure field validation takes place before the post is published/updated
• utilizing a class/code which does not conflict with other wordpress javascript
• allows you to define specific fields as required while others could be optional
• validate fields based on customizable rules including regex for things like email format
• control the visual display of any errors/notices

Thanks in advance!

Answer 1

The easiest way is to add Javascript validation via the jQuery Validate plugin. Here's the most basic walkthrough:

Near your add_meta_box call, enqueue the jQuery Validate plugin as well as a JS file for your simple script:

add_action('admin_enqueue_scripts', 'add_my_js');   
function add_my_js(){    
  wp_enqueue_script('my_validate', 'path/to/jquery.validate.min.js', array('jquery'));
  wp_enqueue_script('my_script_js', 'path/to/my_script.js');
}

Then in my_script.js include the following:

jQuery().ready(function() {
    jQuery("#post").validate();
});

This will enable validation on the post form. Then in the add_meta_box callback where you define the custom fields, you'd add a "required" class for each field you wish to validate, like so:

<input type="text" name="my_custom_text_field" class="required"/>

All fields with "required" in their class will be validated when the post is saved/published/updated. All of the other validation options (rules, error styling, etc) can be set in the document.ready function in my_script.js; check the jQuery Validate docs for all the options.

Answer 2

I found this approach to solve the problem of validate metabox fields using PHP code

https://tommcfarlin.com/post-meta-data-error-messages/

Hope this help you (works for me in a similar scenario)

Answer 3

The Complete Basic Code to add jQuery Validation:

1. Enqueue the validation script. I assume jQuery is already enqued.

   add_action('admin_enqueue_scripts',function($id){
       $validation',$validation_js_url = #your validation.js source;
       wp_register_script( 'validation',$validation_js_url,array(),'',true );
       wp_enqueue_script( 'validation' );
   });
   

2. In the js file or script tag:

   jQuery(document).ready(function($){
       var form = $("form[name='post']");
       $(form).find("input[type='submit']").click(function(e){
           e.preventDefault();
           $(form).validate();
   
           if($(form).valid())
           {
               $("#ajax-loading").show();
               $(form).submit();
           }else{
               $("#publish").removeClass().addClass("button-primary");
               $("#ajax-loading").hide();
           }
       });
   });
   

3. Done :)

Answer 4

I used this code, very helpful, justa changed:

$(form).find("input[type='submit']").click(function(e){

To:

$(form).find("#publish").click(function(e){

'Cause if you have another form inside the main form this start the script.

And:

$(form).submit();

To:

$(this).submit();

'Cause the first line only save the post as draft and you can't publish it no more.

Written everything here: http://allgraphics.it/blog/2012/10/jquery-validation-sui-campi-di-input-postcustom-post-di-wordpress/

Answer 5

If you want to be able to validate server side the easiest option is to use Advanced Custom Fields to define your custom field layouts, and then the Validated Field add-on to set your validation per field in the WordPress Admin.