我正在使用 Jquery 验证插件向一些现有页面添加一些客户端验证。 https://jqueryvalidation.org 验证工作完美。但是，由于用户希望所有字段居中，因此验证消息居中显示。
是否可以保留居中的文本框输入，但将验证消息显示在文本框下方并在文本框开始的位置对齐？
这是我目前所展示的验证: 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
最佳答案
仅 CSS...
使用您的 jQuery 验证插件。
好吧...通过一些 HTML 调整!
CSS 已更改(影响错误消息):
label.error {
display: block;
float: none;
color: red;
position:relative; /* added */
top:0.2em; /* added */
}
td.top{ /* added */
vertical-align:top; /* added */
} /* added */
td{ /* added */
padding-bottom:4px; /* added */
} /* added */
HTML 已更改(使用表格!!--嘿哇!好主意!):
<form id="myForm" action="/SubmitSuccess.html">
<table>
<tr>
<td class="top">
<label>Input Number: </label>
</td>
<td>
<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" />
</td>
</tr>
<tr>
<td class="top">
<label>Input Alpha: </label>
</td>
<td>
<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." />
</td>
</tr>
</table>
<br>
<br>
Click Submit when complete<br>
<input type="submit" name="SUBMIT" value="SUBMIT" />
</form>
工作:
label.error {
display: block;
float: none;
color: red;
position:relative;
top:0.2em;
}
td.top{
vertical-align:top;
}
td{
padding-bottom:4px;
}
input { border: 1px solid black; }
input:focus { border: 1px solid black; }
input.error { border: 1px solid red; }<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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>
</head>
<body bgcolor="white">
<center>
<form id="myForm" action="/SubmitSuccess.html">
<table>
<tr>
<td class="top">
<label>Input Number: </label>
</td>
<td>
<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" />
</td>
</tr>
<tr>
<td class="top">
<label>Input Alpha: </label>
</td>
<td>
<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." />
</td>
</tr>
</table>
<br>
<br>
Click Submit when complete<br>
<input type="submit" name="SUBMIT" value="SUBMIT" />
</form>
</center>
</body>
正确用例:
- 123456
- 啊啊啊啊
关于java - jQuery Validation 插件希望消息在文本框下对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43434459/