サポート » プラグイン » Validation Engineのチェックボックスの位置調整

  • こちらのページと同じようにリアルタイムチェックをしています。 エラー文の吹き出し位置が被ってしまうのを防ぐためにpromptPosition: “inline”を指定してます。

    サンプルページ
    http://www.webdesign-fan-guide.com/jquery-validation-engine

    チェックボックスとラジオボタンの場合は、
    <input>の後にエラー文が表示されるため、表示が崩れてしまいます。

    <input type="checkbox">
     エラー文
     <label>
     テキスト
     </label>

    ◆希望の表示イメージ
    □テキスト
    エラー文

    ◆実際の表示
    □エラー文
    テキスト

    チェックボックスとラジオボタンの場合は
    </label>の後にエラー文を表示させる方法はありますか?

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック投稿者 poncyan

    (@poncyan)

    または、個別に吹き出しの位置を設定したいのですが、

    <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

    (@poncyan)

    promptPosition: “inline”
    は、header内に下記のように記述をしています。

    jQuery(“#check input”).addClass(“validate[minCheckbox[2]]”) .attr(“data-prompt-position”, “inline”);

    • この返信は2年、 10ヶ月前にponcyanが編集しました。

    promptPosition: “inline”を全てに指定するなら以下でも良さそうです。

    jQuery(document).ready(function(){
    jQuery("#form_1").validationEngine();
    });

    のところを

    jQuery(document).ready(function(){
    jQuery("#form_1").validationEngine({promptPosition:"inline"});
    });
    • この返信は2年、 10ヶ月前にAoba Momouchiが編集しました。
    トピック投稿者 poncyan

    (@poncyan)

    ありがとうございます。
    promptPosition: “inline”にしてしまうと
    チェックボックスやラジオボタンの際に表示が崩れてしまいます。

    原因は<input>の後にエラー文がでるようになっているため、</label>の後にエラー文が表示できればpromptPosition: “inline”でも良いのですが、、、

    <input type="checkbox">
     エラー文
     <label>
     テキスト
     </label>

    ◆実際の表示
    □エラー文
    テキスト
    (□はチェックボックスです。)

    ◆希望の表示イメージ
    □テキスト
    エラー文

    少し無理やり感がありますが、<label>の下に同じグループの<input>を追加して、読み取り専用かつCSSで非表示にするのはどうでしょうか。もっと良い方法があれば良いのですが、なるべく既存のJavaScriptには手を加えたくないと思いまして。

    <input type="checkbox">
    エラー文
    <label>
    テキスト
    </label>
    <input type="checkbox" style="display:none;" readonly>

    上記の追加として、inputタグはJavaScriptで追加してもよいかもしれません。例えば
    <label id="checkbox_label">
    として
    jQuery('#checkbox_label').after('<input type="checkbox" style="display:none;" readonly>');
    のような感じでしょうか。

    トピック投稿者 poncyan

    (@poncyan)

    こちらの方法でうまくいきましたが、必須項目にチェックをしていてもエラーが消えなかったりとバグが発生してしまいました。
    やはりあまりプラグインをいじくり回さないほうが良さそうですね。

    いろいろありがとうございました。

    やはりあまりプラグインをいじくり回さないほうが良さそうですね。

    チェックボタンを増やしてCSSで非表示にしただけで、不具合とは考えにくいのですが、他に何かいじくり回しているのでしょうか。
    それだと質問事項の選択肢を増やせないですよね。

    トピック投稿者 poncyan

    (@poncyan)

    チェックボックスが1つのフォームで2つ出てくる場合だと、干渉?しているのか、エラーが正しく表示されず、

    最初はエラーが正しく表示されても、チェックを外したり入れたりをすると、すぐにエラーが表示されなくなりましたが、チェックボタンを増やしたのを戻すと、正しくエラーが表示されました。

    他にいじってる箇所はありませんが、mw wp formを使用しています。

    こんにちは

    こちらの公式のドキュメントにプロンプトの位置調整の方法が書かれています。
    これで解決するかはわかりませんが。

    Github – posabsolute/jQuery-Validation-Engine – Prompt Position Adjustment

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「Validation Engineのチェックボックスの位置調整」には新たに返信することはできません。