我正在前端可见的 WordPress 插件中创建一个表单。 使用 JQuery 验证方法,我在将每个错误精确定位在每个字段下时遇到问题。
这是我的脚本:
function validate_init() { ?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#form_register').validate({
rules: {
ragsoc: {
required: true,
minlength: 2
},
piva: {
required: true,
digits: true,
},
gruppo: {
required: true,
},
},
messages: {
ragsoc: "Inserire la ragione sociale.",
piva: "Solo numeri accettati.",
gruppo: "inserire un valore.",
},
errorElement: "div",
errorPlacement: function(error, element) {
error.insertAfter(element);
},
});
});
</script>
<?php }
add_action('wp_footer', 'validate_init', 999);
这是我的表格:
<?php echo '<form id="form_register" method="post" action="'.$pluginfolder.'/submit.php">'; ?>
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td colspan="3"><label for="ragsoc">Ragione sociale *</label>
<input type="text" name="ragsoc" id="long" /></td>
</tr>
<tr>
<td><label for="piva">Partita Iva *</label>
<input type="text" name="piva" id="tris" /></td>
<td><label for="codfisc">Codice Fiscale</label>
<input type="text" name="codfisc" id="tris" /></td>
<td><label for="gruppo">Gruppo</label>
<input type="text" name="gruppo" id="tris" /></td>
</tr>
<tr>
<td>
<label for="codice">Codice</label>
<input type="text" name="codice" id="tris" />
</td>
<td>
<label for="insegna">Insegna *</label>
<select id="tris" name="insegna">
<option value=""><em>Scegli...</em></option>
<option value="option_1">option_1</option>
<option value="option_2">option_2</option>
</select>
</td>
<td>
<label for="rapporto">Rapporto *</label>
<select id="tris" name="rapporto">
<option value=""><em>Scegli...</em></option>
<option value="option_1">option_1</option>
<option value="option_2">option_2</option>
<option value="option_3">option_3</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="button" id="button" value="Invia" />
<input type="reset" name="button2" id="button2" value="Cancella" />
</tr>
</table>
</form>
最后这是我的CSS:
div.error{
color: #f33;
padding: 0;
margin: 2px 0 0 0;
font-size: 0.7em;
padding-left: 18px;
background-image: url('error.png');
background-position: 0 0;
background-repeat: no-repeat; }
一切正常,但错误消息的位置对于错误重叠的三个列字段来说是错误的,如下图所示:
如何获得这种效果(用photoshop修改):
提前致谢。
最佳答案
您的错误放置代码没有任何问题。您的问题大部分是由无效的 HTML 和缺少规则引起的。 (我不会将 table
用于 form
布局...有更好、更现代的方法来执行此类布局。)
根本原因:
1) 您已重复id="tris"
在多个元素上,这是无效的 HTML 并破坏代码。具有重复的元素 id
的被忽略。使用class
相反。
2) 您未能为这四个附加字段定义任何规则。因此,当然,任何地方都不会显示任何错误。
修复的好主意:
3) 删除所有尾随逗号。虽然这只会破坏旧版本 Internet Explorer 中的代码,但保留尾随逗号是一种草率的编码做法。
4) 您错过了最后一个 </td>
标签在最后<tr></tr>
您的table
.
5) 您无需指定自定义 errorPlacement
回调函数 if error.insertAfter(element)
是其中唯一的代码。由于这只是插件的默认代码,因此删除 errorPlacement
就可以了从您的插件选项中。
工作演示:http://jsfiddle.net/9bRXd/
jQuery(document).ready(function ($) {
$('#form_register').validate({
rules: {
ragsoc: {
required: true,
minlength: 2
},
piva: {
required: true,
digits: true
},
codfisc: {
required: true
},
gruppo: {
required: true
},
insegna: {
required: true
},
rapporto: {
required: true
}
},
errorElement: "div",
messages: {
ragsoc: "Inserire la ragione sociale.",
piva: "Solo numeri accettati.",
gruppo: "inserire un valore."
}
});
});
关于jquery - 定位来自 jQuery 验证插件的消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15096529/