复选框的jQuery动态表单验证
我有一个表单，它有许多字段，我正在使用来自jqueryvalidation.org的JQuery插件来进行验证。除了一个问题之外，一切都很好。
我在表单中有一个复选框数组(假设它被称为music_ideas)，它有三个选项摇滚、流行音乐和爵士乐。我在页面开始时检查了所有选项，并为验证提供了jQuery规则，如下所示：
'#music_ideas'：{必需:真，最小长度:2}
问题如下:当信息有效时，我有一个图标(一个复选标记)。当你点击提交的信息是有效的，所以它似乎，一切良好。如果我取消选中其中的两个复选框，我将期望该复选标记消失，并被红十字所代替，以指示错误。除非再次提交表单，然后(提交之后)动态验证才能正常工作(即，每当选中/取消选中复选框时，表单就会被验证)，才会发生这种情况。
我对这件事哪里出错有什么想法吗？
你好，乔治
编辑:下面是一个最低限度的工作示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="example.css">
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#test_form').validate({
success:"valid",
rules: {
'music_prefs[]': {
required:true,
minlength:2
}
},
messages: {
"music_prefs[]": {
required: " You need to select a music idea",
minlength: " You need to select at least two music ideas"
}
},
errorPlacement: function(error, element) {
if (element.attr("name") == 'music_prefs[]') {
element.parent().append(error);
}
else {
error.insertAfter(element);
}
},
});
});
</script>
</head>
<body>
<form id="test_form" action="#" method="post">
<div class="music_ideas"><label for="mi">Music Ideas:</label>
<input type="checkbox" name="music_prefs[]" id="mp1" checked value="Rock">Rock
<input type="checkbox" name="music_prefs[]" id="mp2" checked value="Pop">Pop
<input type="checkbox" name="music_prefs[]" id="mp3" checked value="Jazz">Jazz</div>
<input type="submit" name="btn_submit" value="Submit the form" id="bs">
<input type="reset" name="btn_reset" value="Clear Fields" id="br">
</form>
</body>
</html>CSS文件中的相关行是：
label.error {
background: url('unchecked.gif') no-repeat;
}
label.error.valid {
background: url('checked.gif') no-repeat;
}回答 1
Stack Overflow用户
发布于 2014-04-28 08:58:06
我认为这里的问题是，当用户提交表单时，JQuery验证会看到用户输入是正确的，并停止尝试验证表单。
但是，您可以通过调用$("#test_form").valid()再次强制验证。
在这种情况下，我们希望每次用户选中复选框时检查表单是否有效：
$("#test_form input[type='checkbox']").change(function() {
$("#test_form").valid();
});JSFiddle 1: http://jsfiddle.net/qW3az/
或者，如果只希望在用户第一次尝试提交表单后出现复选框：
$("#test_form").submit(function(e) {
e.preventDefault();
$("#test_form input[type='checkbox']").change(function() {
$("#test_form").valid();
});
});JSFiddle 2: http://jsfiddle.net/Ydz5J/
注意:您也可以调用$("#test_form").valid() on $(document).ready()立即显示复选框。
https://stackoverflow.com/questions/23322900
复制相似问题
腾讯云开发者
