jquery表单检查，如果值为空，则解除绑定(bind)提交点击

Question

我尝试编写一个jquery表单检查代码，如果值为空/单词长度小于某个值，则取消绑定(bind)提交点击，在某些div中显示错误提示。然后5秒后，绑定(bind)提交点击。 Code in jsfiddle ，但是绑定(bind)/取消绑定(bind)并不如我所愿。

JS:

$('#submit').click(function(){
    if($('#title').val().length<10){
        $('#statue').append('You should type more than 10 words');
        $('#submit').unbind("click");
        setTimeout(function (){
            $("#statue").html("");
            $('#submit').bind("click");
        }, 5000);
    }
    if($('#content').val().length<20){
        $('#statue').append('You should type more than 20 words');
        $('#submit').unbind("click");
        setTimeout(function (){
            $("#statue").html("");
            $('#submit').bind("click");
        }, 5000);
    }
    if(!$('#type').val()){
        $('#statue').append('You should select one type.');
        $('#submit').unbind("click");
        setTimeout(function (){
            $("#statue").html("");
            $('#submit').bind("click");
        }, 5000);
    }
});

​HTML:

<form method="post" action="porcess.php">
    <input id="title" name="title" type="text" />
    <textarea name="content" id="content" cols="40" rows="2"></textarea>
    <select name="type" id="type" size="5">
        <option value="a">Section A</option>
        <option value="b">Section B</option>
        <option value="c">Section C</option>
        <option value="d">Section D</option>
        <option value="e">Section E</option>
    </select>
    <input type="submit" name="submit" id="submit" value="submit" />
</form>
<div id="statue"></div>​

Answer 1

你的代码看起来很糟糕。您应该重复使用一些 block 。我更新了 jsFiddle，重用了一些代码，并重新排列了功能:http://jsfiddle.net/kwyun/21/

我修改的另一件事是绑定(bind)到另一个函数而不是取消绑定(bind)，因为如果用户在 5 秒间隔内单击，表单将提交。

稍后编辑:您可以中止解除绑定(bind)的想法，相反，如果存在无效字段，您可以返回 false 并设置仅用于隐藏消息的计时器。这里更新了 jsFiddle :http://jsfiddle.net/kwyun/27/