Title: Validation Engineのチェックボックスの位置調整
Last modified: 2021年4月16日

---

# Validation Engineのチェックボックスの位置調整

 *  [poncyan](https://ja.wordpress.org/support/users/poncyan/)
 * (@poncyan)
 * [5年、 6ヶ月前](https://ja.wordpress.org/support/topic/validation-engine%e3%81%ae%e3%83%81%e3%82%a7%e3%83%83%e3%82%af%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e4%bd%8d%e7%bd%ae%e8%aa%bf%e6%95%b4/)
 * こちらのページと同じようにリアルタイムチェックをしています。 エラー文の吹き出し
   位置が被ってしまうのを防ぐためにpromptPosition: “inline”を指定してます。
 *  サンプルページ
    [http://www.webdesign-fan-guide.com/jquery-validation-engine](http://www.webdesign-fan-guide.com/jquery-validation-engine)
 *  チェックボックスとラジオボタンの場合は、
    <input>の後にエラー文が表示されるため、
   表示が崩れてしまいます。
 *     ```
       <input type="checkbox">
        エラー文
        <label>
        テキスト
        </label>
       ```
   
 *  ◆希望の表示イメージ
    □テキスト エラー文
 *  ◆実際の表示
    □エラー文 テキスト
 *  チェックボックスとラジオボタンの場合は
    </label>の後にエラー文を表示させる方法
   はありますか？

10件の返信を表示中 - 1 - 10件目 (全10件中)

 *  トピック投稿者 [poncyan](https://ja.wordpress.org/support/users/poncyan/)
 * (@poncyan)
 * [5年、 6ヶ月前](https://ja.wordpress.org/support/topic/validation-engine%e3%81%ae%e3%83%81%e3%82%a7%e3%83%83%e3%82%af%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e4%bd%8d%e7%bd%ae%e8%aa%bf%e6%95%b4/#post-11670997)
 * または、個別に吹き出しの位置を設定したいのですが、
 * <input>タグ内にdata-prompt-position=”bottomLeft”などの指定をして
    【例】<input
   type=”text” name=”xxx” class=”validate[required]” data-prompt-position=”bottomLeft”
   >
 * contact form7やmw wp formでは<input>に
    data-prompt-positionが使用できないと思う
   ので、何か良い方法はありますでしょうか？
 *  トピック投稿者 [poncyan](https://ja.wordpress.org/support/users/poncyan/)
 * (@poncyan)
 * [5年、 6ヶ月前](https://ja.wordpress.org/support/topic/validation-engine%e3%81%ae%e3%83%81%e3%82%a7%e3%83%83%e3%82%af%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e4%bd%8d%e7%bd%ae%e8%aa%bf%e6%95%b4/#post-11671001)
 * promptPosition: “inline”
    は、header内に下記のように記述をしています。
 * jQuery(“#check input”).addClass(“validate[minCheckbox[2]]”) .attr(“data-prompt-
   position”, “inline”);
    -  この返信は5年、 6ヶ月前に[poncyan](https://ja.wordpress.org/support/users/poncyan/)
      が編集しました。
 *  [Aoba Momouchi](https://ja.wordpress.org/support/users/aoixtreme/)
 * (@aoixtreme)
 * [5年、 6ヶ月前](https://ja.wordpress.org/support/topic/validation-engine%e3%81%ae%e3%83%81%e3%82%a7%e3%83%83%e3%82%af%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e4%bd%8d%e7%bd%ae%e8%aa%bf%e6%95%b4/#post-11671002)
 * promptPosition: “inline”を全てに指定するなら以下でも良さそうです。
 *     ```
       jQuery(document).ready(function(){
       jQuery("#form_1").validationEngine();
       });
       ```
   
 * のところを
 *     ```
       jQuery(document).ready(function(){
       jQuery("#form_1").validationEngine({promptPosition:"inline"});
       });
       ```
   
    -  この返信は5年、 6ヶ月前に[Aoba Momouchi](https://ja.wordpress.org/support/users/aoixtreme/)
      が編集しました。
 *  トピック投稿者 [poncyan](https://ja.wordpress.org/support/users/poncyan/)
 * (@poncyan)
 * [5年、 6ヶ月前](https://ja.wordpress.org/support/topic/validation-engine%e3%81%ae%e3%83%81%e3%82%a7%e3%83%83%e3%82%af%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e4%bd%8d%e7%bd%ae%e8%aa%bf%e6%95%b4/#post-11671004)
 * ありがとうございます。
    promptPosition: “inline”にしてしまうと チェックボックス
   やラジオボタンの際に表示が崩れてしまいます。
 * 原因は<input>の後にエラー文がでるようになっているため、</label>の後にエラー文
   が表示できればpromptPosition: “inline”でも良いのですが、、、
 *     ```
       <input type="checkbox">
        エラー文
        <label>
        テキスト
        </label>
       ```
   
 * ◆実際の表示
    □エラー文 テキスト （□はチェックボックスです。）
 * ◆希望の表示イメージ
    □テキスト エラー文
 *  [Aoba Momouchi](https://ja.wordpress.org/support/users/aoixtreme/)
 * (@aoixtreme)
 * [5年、 5ヶ月前](https://ja.wordpress.org/support/topic/validation-engine%e3%81%ae%e3%83%81%e3%82%a7%e3%83%83%e3%82%af%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e4%bd%8d%e7%bd%ae%e8%aa%bf%e6%95%b4/#post-11671124)
 * 少し無理やり感がありますが、<label>の下に同じグループの<input>を追加して、読み取り
   専用かつCSSで非表示にするのはどうでしょうか。もっと良い方法があれば良いのですが、
   なるべく既存のJavaScriptには手を加えたくないと思いまして。
 *     ```
       <input type="checkbox">
       エラー文
       <label>
       テキスト
       </label>
       <input type="checkbox" style="display:none;" readonly>
       ```
   
 *  [Aoba Momouchi](https://ja.wordpress.org/support/users/aoixtreme/)
 * (@aoixtreme)
 * [5年、 5ヶ月前](https://ja.wordpress.org/support/topic/validation-engine%e3%81%ae%e3%83%81%e3%82%a7%e3%83%83%e3%82%af%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e4%bd%8d%e7%bd%ae%e8%aa%bf%e6%95%b4/#post-11671125)
 * 上記の追加として、inputタグはJavaScriptで追加してもよいかもしれません。例えば
   `
   <label id="checkbox_label">` として `jQuery('#checkbox_label').after('<input 
   type="checkbox" style="display:none;" readonly>');` のような感じでしょうか。
 *  トピック投稿者 [poncyan](https://ja.wordpress.org/support/users/poncyan/)
 * (@poncyan)
 * [5年、 5ヶ月前](https://ja.wordpress.org/support/topic/validation-engine%e3%81%ae%e3%83%81%e3%82%a7%e3%83%83%e3%82%af%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e4%bd%8d%e7%bd%ae%e8%aa%bf%e6%95%b4/#post-11671148)
 * こちらの方法でうまくいきましたが、必須項目にチェックをしていてもエラーが消えなか
   ったりとバグが発生してしまいました。
    やはりあまりプラグインをいじくり回さない
   ほうが良さそうですね。
 * いろいろありがとうございました。
 *  [Aoba Momouchi](https://ja.wordpress.org/support/users/aoixtreme/)
 * (@aoixtreme)
 * [5年、 5ヶ月前](https://ja.wordpress.org/support/topic/validation-engine%e3%81%ae%e3%83%81%e3%82%a7%e3%83%83%e3%82%af%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e4%bd%8d%e7%bd%ae%e8%aa%bf%e6%95%b4/#post-11671168)
 * >  やはりあまりプラグインをいじくり回さないほうが良さそうですね。
 * チェックボタンを増やしてCSSで非表示にしただけで、不具合とは考えにくいのですが、
   他に何かいじくり回しているのでしょうか。
    それだと質問事項の選択肢を増やせない
   ですよね。
 *  トピック投稿者 [poncyan](https://ja.wordpress.org/support/users/poncyan/)
 * (@poncyan)
 * [5年、 5ヶ月前](https://ja.wordpress.org/support/topic/validation-engine%e3%81%ae%e3%83%81%e3%82%a7%e3%83%83%e3%82%af%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e4%bd%8d%e7%bd%ae%e8%aa%bf%e6%95%b4/#post-11671169)
 * チェックボックスが1つのフォームで2つ出てくる場合だと、干渉？しているのか、エラー
   が正しく表示されず、
 * 最初はエラーが正しく表示されても、チェックを外したり入れたりをすると、すぐにエラー
   が表示されなくなりましたが、チェックボタンを増やしたのを戻すと、正しくエラーが
   表示されました。
 * 他にいじってる箇所はありませんが、mw wp formを使用しています。
 *  [munyagu](https://ja.wordpress.org/support/users/munyagu/)
 * (@munyagu)
 * [5年、 5ヶ月前](https://ja.wordpress.org/support/topic/validation-engine%e3%81%ae%e3%83%81%e3%82%a7%e3%83%83%e3%82%af%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e4%bd%8d%e7%bd%ae%e8%aa%bf%e6%95%b4/#post-11671170)
 * こんにちは
 * こちらの公式のドキュメントにプロンプトの位置調整の方法が書かれています。
    これ
   で解決するかはわかりませんが。
 * [Github – posabsolute/jQuery-Validation-Engine – Prompt Position Adjustment](https://github.com/posabsolute/jQuery-Validation-Engine#prompt-position-adjustment)

10件の返信を表示中 - 1 - 10件目 (全10件中)

 トピック「Validation Engineのチェックボックスの位置調整」には新たに返信すること
はできません。

 * フォーラム: [プラグイン](https://ja.wordpress.org/support/forum/plugins/)
 * 10件の返信
 * 3人の参加者
 * 最後の返信者: [munyagu](https://ja.wordpress.org/support/users/munyagu/)
 * 最後の活動: [5年、 5ヶ月前](https://ja.wordpress.org/support/topic/validation-engine%e3%81%ae%e3%83%81%e3%82%a7%e3%83%83%e3%82%af%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e4%bd%8d%e7%bd%ae%e8%aa%bf%e6%95%b4/#post-11671170)
 * 状態: 未解決

## トピック

### 人気のトピック

### 返信がないトピック

### サポート関連ではないトピック

### 解決済みのトピック

### 未解決のトピック

### すべてのトピック