Skip to content

Instantly share code, notes, and snippets.

@Drethic
Last active June 6, 2016 03:15
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Drethic/7045152 to your computer and use it in GitHub Desktop.
Save Drethic/7045152 to your computer and use it in GitHub Desktop.
Basic example of how to use the jQuery Validate library to display errors on the admin side of WordPress in conjunction with jaredatch / Custom-Metaboxes-and-Fields-for-WordPress.
jQuery(document).ready(function($) {
$('.cmb_id__prefix_layout_option').find('td').append('<div id="_prefix_layout_option_error" class="alert alert-error text-center"></div>');
$('input[name="_prefix_layout_option"').addClass('layout_option');
$('.cmb_id__prefix_thank_you_url').find('td').append('<div id="_prefix_thank_you_url_error" class="alert alert-error text-center"></div>');
$('input[name="_prefix_thank_you_url"').addClass('thank_you_url');
$("#post").validate({
//debug: true,
ignore: [],
wrapper: 'p',
rules: {
_prefix_layout_option: { required: true },
_prefix_thank_you_url: { required: true, minlength: 3 },
},
messages: {
_prefix_layout_option: {
required: 'You must select a layout.'
},
_prefix_thank_you_url: {
required: 'You must enter a valid thank you url.',
minlength: 'The URL must be at least 3 characters long.'
}
},
errorClass: 'alert-error',
highlight: function(element, errorClass) {
$(element).addClass('error');
},
unhighlight: function(element, errorClass) {
$(element).removeClass('error');
},
errorPlacement: function(error, element) {
if ($(element).hasClass("layout_option")) {
$('#_prefix_layout_option_error').append(error);
} else if( $(element).hasClass('thank_you_url') ) {
$('#_prefix_thank_you_url_error').append(error);
}
},
invalidHandler: function() {
jQuery('#publish').removeClass('button-primary-disabled');
jQuery('#publishing-action').find('.spinner').css('visibility', 'hidden');
},
submitHandler: function(form){
form.submit();
}
});
});
<?php
//If you are running within a theme add this to your functions.php
//To load within a plugin add the following line to your __construct() and uncomment lines 5 and 12.
//add_action( 'admin_enqueue_scripts', array( &$this, 'add_admin_styles' ) );
//function add_admin_styles() {
global $wp_query;
if( is_admin() && $wp_query->query_vars['post_type'] == self::PAGES_POST_TYPE ) {
// Load validation & Admin JS for CPT-editor page
wp_enqueue_script( 'jquery-validate', plugins_url( 'jquery.validate.min.js', __FILE__), array( "jquery" ), '1.11.1', true );
wp_enqueue_script( 'admin-js', plugins_url( 'admin.js', __FILE__ ), array(), '2.1', true );
}
//}
?>
<?php
$meta_boxes[] = array(
'id' => 'basic_settings',
'title' => 'Basic Settings',
'pages' => array( self::PAGES_POST_TYPE ), // post type
'context' => 'normal',
'priority' => 'high',
'show_names' => true, // Show field names on the left
'fields' => array(
'name' => 'Layout Options *',
'id' => $prefix . 'layout_option',
'type' => 'radio_inline',
'class' => 'layout_option',
'options' => array(
array( 'name' => '<img src="'.plugins_url( 'images/thumb-1.jpg" />' , __FILE__), 'value' => '1', ),
array( 'name' => '<img src="'.plugins_url( 'images/thumb-2.jpg" />' , __FILE__), 'value' => '2', ),
array( 'name' => '<img src="'.plugins_url( 'images/thumb-3.jpg" />' , __FILE__), 'value' => '3', ),
array( 'name' => '<img src="'.plugins_url( 'images/thumb-4.jpg" />' , __FILE__), 'value' => '4', ),
array( 'name' => '<img src="'.plugins_url( 'images/thumb-5.jpg" />' , __FILE__), 'value' => '5', ),
array( 'name' => '<img src="'.plugins_url( 'images/thumb-6.jpg" />' , __FILE__), 'value' => '6', ),
array( 'name' => '<img src="'.plugins_url( 'images/thumb-7.jpg" />' , __FILE__), 'value' => '7', ),
array( 'name' => '<img src="'.plugins_url( 'images/thumb-8.jpg" />' , __FILE__), 'value' => '8', ),
array( 'name' => '<img src="'.plugins_url( 'images/thumb-9.jpg" />' , __FILE__), 'value' => '9', ),
array( 'name' => '<img src="'.plugins_url( 'images/thumb-10.jpg" />' , __FILE__), 'value' => '10', ),
array( 'name' => '<img src="'.plugins_url( 'images/thumb-11.jpg" />' , __FILE__), 'value' => '11', ),
array( 'name' => '<img src="'.plugins_url( 'images/thumb-12.jpg" />' , __FILE__), 'value' => '12', ),
),
),
array(
'name' => 'Thank You Path URL *',
'desc' => 'This URL will be added to the site domain. Currently: ' . site_url() . '&nbsp;{plus this Path URL}',
'id' => $prefix . 'thank_you_url',
'type' => 'text'
)
);
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment