Проверка пользовательских значений мета-бокса и обязательных полей

16

То, что я никогда не рассматривал, - лучший способ проверить правильность заполнения определенных полей формы для пользовательских мета-блоков типов записей.

Я ищу, чтобы получить экспертное мнение о том, как лучше проверить пользовательские поля для любых метабоксов, которые можно создать. Мой интерес к:

  • убедитесь, что проверка поля происходит до публикации / обновления сообщения
  • используя класс / код, который не конфликтует с другим Javascript WordPress
  • позволяет вам определять определенные поля по мере необходимости, в то время как другие могут быть необязательными
  • проверять поля на основе настраиваемых правил, включая регулярные выражения для таких вещей, как формат электронной почты
  • контролировать визуальное отображение любых ошибок / уведомлений

Заранее спасибо!

NetConstructor.com
источник

Ответы:

21

Самый простой способ - добавить проверку Javascript через плагин jQuery Validate . Вот самое простое прохождение:

Рядом с вашим вызовом add_meta_box поставьте в очередь плагин jQuery Validate и файл JS для вашего простого скрипта:

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');
}

Затем в my_script.js включите следующее:

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

Это включит проверку в почтовой форме. Затем в обратном вызове add_meta_box, где вы определяете настраиваемые поля, вы добавляете «обязательный» класс для каждого поля, которое вы хотите проверить, вот так:

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

Все поля с «обязательным» в своем классе будут проверены, когда сообщение будет сохранено / опубликовано / обновлено. Все остальные параметры проверки (правила, стилизация ошибок и т. Д.) Можно установить в функции document.ready в my_script.js; проверьте документы jQuery Validate для всех вариантов.

danblaker
источник
Спасибо, я попробую завтра, но не могли бы вы объяснить, как сделать разные проверки. Например, проверка правильности адреса электронной почты, проверка того, что не более или не менее XX символов, заполнено ли поле формы ... что-то в этом роде?
NetConstructor.com
Кроме того, это проверяет, прежде чем сообщение будет сохранено / обновлено? Если нет, как я могу это сделать?
NetConstructor.com
Примеры и документация для плагина jQuery Validation (ссылка в моем ответе) покажет вам, как делать все эти вещи. Проверка по умолчанию происходит при отправке, но вы можете активировать ее при размытии или при изменении любого элемента формы для пользовательских полей.
Данблейкер
Я реализовал это решение, и оно выглядит очень многообещающе, хотя есть одна проблема: что я могу добавить в 'submitHandler'? После проверки с помощью jquery.validate Wordpress ничего не делает (за исключением того, что buttun остается в анимированном состоянии). Как передать ребенка обратно в WP?
mike23
2
Если вы просто пытаетесь вернуть кнопку «Опубликовать» в ее нормальное состояние, когда обязательное поле пусто (или какая-то другая проверка не пройдена), вам не нужно ничего делать с submitHandler; просто отредактируйте код validate (), чтобы изменить кнопку при сбое проверки. Это работает: jQuery ("# ​​post"). Validate ({invalidHandler: function () {jQuery ('# publish'). RemoveClass ('button-primary-disabled'); jQuery ('# ajax-loading'). Css ('видимость', 'скрыто');}});
Данблейкер
2

Полный базовый код для добавления проверки jQuery:

  1. Поставьте в очередь проверочный скрипт. Я предполагаю, что jQuery уже исчерпан.

    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. В теге js файл или скрипт:

    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. Выполнено :)

Ijas Ameenudeen
источник
Как насчет на стороне сервера?
NetConstructor.com
2

Я использовал этот код, очень полезный, просто изменил:

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

Для того, чтобы:

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

Потому что если у вас есть другая форма внутри основной формы, запустите скрипт.

И:

$(form).submit();

Для того, чтобы:

$(this).submit();

Потому что в первой строке сохраните только черновик, и вы больше не сможете его опубликовать.

Здесь все написано: http://allgraphics.it/blog/2012/10/jquery-validation-sui-campi-di-input-postcustom-post-di-wordpress/

Рики
источник
2

Я нашел этот подход, чтобы решить проблему проверки полей метабокса с помощью PHP-кода

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

Надеюсь, это поможет вам (работает для меня в аналогичном сценарии)

Хулио Гарсес Тойбер
источник
Хотя эта ссылка может ответить на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными, если связанная страница изменится.
Габриэль
0

Если вы хотите иметь возможность проверять серверную часть, самый простой вариант - использовать расширенные настраиваемые поля для определения макетов настраиваемых полей, а затем надстройку « Проверяемое поле», чтобы установить валидацию для каждого поля в WordPress Admin.

doublesharp
источник