我有一个包含 3 个 Web 表单的网页，其中前两个需要数字输入，最后一个可能不是空的。
以下是简化后的可立即运行的测试用例：
<html>
<head>
<style>
.invalid {
border: 2px solid #FF0000;
background-color: #FFCCCC;
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function() {
//$('body').click(....)
$('#cl_txt, #mks_txt, #comment_txt').blur(function() {
$('#cl_txt, #mks_txt, #comment_txt').removeClass('invalid');
});
$('#mks_btn').click(function(e) {
if (! $('#mks_txt').val().match(/^[0-9]{6,}$/i)) {
$('#mks_txt').addClass('invalid');
e.preventDefault();
}
});
$('#cl_btn').click(function(e) {
if (! $('#cl_txt').val().match(/^[0-9]{6,}$/i)) {
$('#cl_txt').addClass('invalid');
e.preventDefault();
}
});
$('#comment_btn').click(function(e) {
if ($('#comment_txt').val().length < 2) {
$('#comment_txt').addClass('invalid');
e.preventDefault();
}
});
});
</script>
</head>
<body>
<table border=1>
<form><tr><th>MKS</th><td>
<input name="toggle_mks" id="mks_txt" type="text" size="10">
<input type="submit" id="mks_btn" value="Add MKS" class="toggle">
</td></tr>
<form><tr><th>CL</th><td>
<input name="toggle_cl" id="cl_txt" type="text" size="10">
<input type="submit" id="cl_btn" value="Add CL" class="toggle">
</td></tr></form>
<form><tr><th>Comments</th><td>
<textarea name="comment" id="comment_txt" rows="4" cols="40">
</textarea>
<input type="submit" id="comment_btn" value="Add comment" class="toggle">
</td></tr></form>
</table>
</body>
</html>
当输入了无效文本并单击了相应的提交按钮时，我将.invalid类添加到该文本字段或文本区域以使其显示为红色。
我的问题在于处理用户改变主意并决定不再提交该 Web 表单的情况。相反，她单击另一个 Web 表单，或者可能只是单击网页中的某个位置。
在这种情况下，我希望再次从文本元素#cl_txt、#mks_txt和#comment_txt中删除红色的.invalid类。但是不知道怎么安排。我试过设置$('#cl_txt, #mks_txt, #comment_txt').blur(....)但它从来没有始终如一地工作。我已经尝试过$('body').click(....)，但是表单验证似乎中断了，文本字段永远不会涂成红色。
请问有什么帮助吗？