web-dev-qa-db-ja.com

カスタムメタボックス値と必須フィールドの検証

私がこれまで見たことがなかったものは、特定のフォームフィールドがカスタム投稿タイプのメタボックスに正しく記入されていることを検証するための最良の方法です。

作成する可能性のあるメタボックスのカスタムフィールドを検証する方法について、専門家の意見を得ることを目指しています。私の興味は：

  • 投稿が公開または更新される前にフィールドの検証が行われるようにする
  • 他のワードプレスJavaScriptと競合しないクラス/コードを利用する
  • 特定のフィールドを必要に応じて定義し、他のフィールドはオプションにすることができます。
  • 電子メール形式などの正規表現を含むカスタマイズ可能なルールに基づいてフィールドを検証する
  • エラー/通知の表示を制御する

前もって感謝します！

custom-fieldcustomizationjavascriptjquery
15
NetConstructor.com

最も簡単な方法は jQuery Validateプラグイン を介してJavascript検証を追加することです。これが最も基本的なチュートリアルです。

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コールバックで、検証したいフィールドごとに "required"クラスを追加します。

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

投稿が保存/公開/更新されたときに、クラスに "required"が含まれるすべてのフィールドが検証されます。他のすべての検証オプション（ルール、エラーのスタイル設定など）は、my_script.jsのdocument.ready関数で設定できます。すべてのオプションについては、jQuery Validateのドキュメントを確認してください。

20
danblaker

私はこのコードを使いました。

$(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
Ricky

私はPHPコードを使用してメタボックスフィールドを検証する問題を解決するためにこのアプローチを見つけました

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

これがあなたを助けてくれることを願っています（同様のシナリオで私のために働きます）

2
Julio Garcés Teuber

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ファイルまたはscriptタグでは、次のようになります。

    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. 完了:)

2
Ijas Ameenudeen

サーバー側を検証できるようにするには、 Advanced Custom Fields を使用してカスタムフィールドレイアウトを定義し、次に Validated Field アドオンを使用してフィールドごとに検証を設定します。 WordPress管理者.

0
doublesharp