Question

我有一个包含3个网页表单的网页，其中前两个表示数字输入，最后一个可能不为空。

A web form showing three text fields, two of them containing invalid inputs

以下是简化且可立即运行的测试用例：

<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 类添加到该文本字段或文本区域，使其显示为红色。

我的问题在于处理情况，用户改变主意并决定不再提交该网络表单。相反，她点击进入另一个网页表单，或者只是点击网页中的某个位置。

在这种情况下，我希望从文本元素 #cl_txt ， #mks_txt 和中删除红色 .invalid 类> #comment_txt 再次。但我不知道如何安排它。我已经尝试设置 $（'＃cl_txt，＃mks_txt，＃comment_txt'）。模糊（....）但它永远不会一致。我已经尝试了 $（'body'）。点击（....），但是表单验证似乎破了，文本字段永远不会被涂成红色。

请帮忙吗？

Answer 1

尝试使用jQuery outside events插件。另请参阅demo。主要的想法是，您委托元素clickoutside（或甚至dblclickoutside）事件，并指定触发时应该发生的事情。

希望这会有所帮助。

jQuery：当用户点击其他地方时清除Web表单

1 个答案: