0
Jquery検証プラグインを使用していくつかの既存のページにクライアント側検証を追加しています。 https：// jqueryvalidation.org 検証は完全に機能しています。ただし、ユーザーはすべてのフィールドを中央揃えにしたいので、検証メッセージは中央に表示されます。jQuery検証プラグインがメッセージをテキストボックスの下に揃えたい場合
テキストボックスの中央に入力することはできますが、テキストボックスの下に確認メッセージが表示され、テキストボックスの開始位置が揃えられますか？ 1
これは私がその下にテキストボックスに合わせ検証メッセージを達成しようとしていますものです：
これは私がこれまでの検証を示したものです。 2
ここでは、検証を使用するためのアイデアを得るために取り組んでいる簡単なコードを示します。実際のフォームは通常12-15の入力フィールドを持ち、すべてが中央に配置されています。
"center"タグは推奨されていませんが、可能ならば今のところそれを維持しようとしています。
<script src="https://jqueryvalidation.org/files/lib/jquery.js"></script>
<script src="https://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="https://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
$(document).ready(function() {
$("#myForm").validate();
});
</script>
<style>
label.error {
display: block;
float: none;
color: red;
}
input { border: 1px solid black; }
input:focus { border: 1px solid black; }
input.error { border: 1px solid red; }
</style>
<center>
<form id="myForm" action="/SubmitSuccess.html">
<label>Input Number: </label>
<input type="text" name="input_number" data-rule-required="true" data-msg-required="Required field. Please enter 6 digits" size=10 maxlength=10 pattern="[0-9]{6}" data-msg-pattern="Please enter 6 digits" />
<br>
<label>Input Alpha: </label>
<input type="text" name="input_alpha" id="input_alpha" data-rule-required="true" data-msg-required="Required field. Please enter 6 uppercase characters" size=10 maxlength=10 pattern="[A-Z]{6}" data-msg-pattern="Must be 6 uppercase characters." />
<br><br>
Click Submit when complete<br>
<input type="submit" name="SUBMIT" value="SUBMIT" />
</form>
</center>
JFiddle - https://jsfiddle.net/4d3xgud9
ありがとう！テーブルは、セル内のメッセージの長さに応じてテキストボックスを移動するような、他の問題をもたらしました。しかし、それは私が持っていたよりも良かったし、私の質問に答えました！ 詳細な回答をいただきありがとうございます。このプラグインを使って作業することを学ぶ上で非常に役立ちました！ – dmayley
それを読むのは大変です。 –