または、個別に吹き出しの位置を設定したいのですが、
<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が使用できないと思うので、何か良い方法はありますでしょうか？
promptPosition: “inline”
は、header内に下記のように記述をしています。
jQuery(“#check input”).addClass(“validate[minCheckbox[2]]”) .attr(“data-prompt-position”, “inline”);
promptPosition: “inline”を全てに指定するなら以下でも良さそうです。
jQuery(document).ready(function(){
jQuery("#form_1").validationEngine();
});
のところを
jQuery(document).ready(function(){
jQuery("#form_1").validationEngine({promptPosition:"inline"});
});
ありがとうございます。
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>');
のような感じでしょうか。
こちらの方法でうまくいきましたが、必須項目にチェックをしていてもエラーが消えなかったりとバグが発生してしまいました。
やはりあまりプラグインをいじくり回さないほうが良さそうですね。
いろいろありがとうございました。
やはりあまりプラグインをいじくり回さないほうが良さそうですね。
チェックボタンを増やしてCSSで非表示にしただけで、不具合とは考えにくいのですが、他に何かいじくり回しているのでしょうか。
それだと質問事項の選択肢を増やせないですよね。
チェックボックスが1つのフォームで2つ出てくる場合だと、干渉？しているのか、エラーが正しく表示されず、
最初はエラーが正しく表示されても、チェックを外したり入れたりをすると、すぐにエラーが表示されなくなりましたが、チェックボタンを増やしたのを戻すと、正しくエラーが表示されました。
他にいじってる箇所はありませんが、mw wp formを使用しています。
