如果验证失败,我想在顶部显示一条错误消息。我不想使用errorPlacement
选项。相反,我想在Bootstrap警报中显示消息。
这是我的HTML:
<form method="POST" action="/role" accept-charset="UTF-8" id="roles_form">
<div class="alert alert-danger vd_hidden">
<span class="vd_alert-icon"><i class="fa fa-exclamation-circle vd_red"></i></span>
Please select a role.
</div>
<input id="role_administrator" name="role" type="radio" value="administrator">
<label for="role_administrator">Administrator</label>
<input id="role_manager" name="role" type="radio" value="manager">
<label for="role_manager">Manager</label>
<input type="submit" value="Submit">
</form>
这是我的JavScript:
var roles_form = $('#roles_form');
var error_roles_form = $('.alert-danger', roles_form);
roles_form.validate({
focusInvalid: false, // do not focus the last invalid input
debug: true,
rules: {
role: "required"
},
invalidHandler: function (event, validator) { //display error alert on form submit
error_roles_form.fadeIn(500);
},
});
这不起作用。它既没有进行任何验证(表单已提交,如果我删除了debug
选项)也没有显示任何错误。
更新 在查看Sparky提供的solution之后,我意识到我正在使用插件来隐藏无线电元素并替换为可以样式化的对象。由于隐藏了无线电元素,jQuery Validation无法使用我的JavaScript代码正确验证它们。让我感到惊讶的是,即使启用了调试模式,它也没有显示任何JavaScript错误。
答案 0 :(得分:0)
引用OP:
&#34;这不起作用。也没有任何验证(表单已提交,如果我删除了
debug
选项),也没有显示任何错误。&#34;
实际上,您发布的代码正在运行:http://jsfiddle.net/TTJB7/
引用OP:
&#34;如果验证失败,我想在顶部显示一条错误消息。我不想使用
errorPlacement
选项。&#34;
要将错误消息放入框中,您需要the errorLabelContainer
option。因此,errorPlacement
不是将错误消息放在每个输入(errorLabelContainer
)旁边的默认行为,而是将消息放入一个自动隐藏/显示的指定容器中。
var roles_form = $('#roles_form');
var error_roles_form = $('.alert-danger', roles_form);
roles_form.validate({
focusInvalid: false, // do not focus the last invalid input
debug: true,
rules: {
role: "required"
},
messages: {
role: "Please select a role."
},
errorLabelContainer: error_roles_form // puts the error messages into this container
});
HTML:
<form id="roles_form">
<div class="alert alert-danger vd_hidden"></div>
<input id="role_administrator" name="role" type="radio" value="administrator" />
<input id="role_manager" name="role" type="radio" value="manager" />
<input type="submit" value="Submit" />
</form>
DEMO:http://jsfiddle.net/TTJB7/1/
对于所有其他可用的回调选项see the documentation。
答案 1 :(得分:0)
当我意识到实际问题是隐藏的无线电元素时,我做了一些研究并解决了这个问题。
首先,我将ignore
应用于“”,以便它不会忽略hidden
元素并对其进行验证。
然后我需要停止在元素后面出现的默认错误消息。所以我为该选项分配了一个空函数。
这是我的最终JavaScript代码:
roles_form.validate({
focusInvalid: false, // do not focus the last invalid input
ignore: "",
rules: {
role: "required"
},
invalidHandler: function (event, validator) { //display error alert on form submit
error_roles_form.fadeIn(500);
},
errorPlacement: function(error, element) {}
});