Question

我试着编写一个jquery表单检查代码，如果值为空/单词lengh小于某个东西，unbind submit click，在某个div中显示错误提示。然后5秒钟后，绑定提交点击。 Code in jsfiddle，但绑定/解除绑定不符合我的意愿。

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

您的代码看起来很糟糕。您应该重用一些块。我更新了jsFiddle，重用了一些代码，并重新安排了函数：http://jsfiddle.net/kwyun/21/

我修改的另一件事是绑定到另一个函数而不是unbindig，因为如果用户点击该5秒间隔，表单将提交。

稍后编辑：您可以中止取消绑定的ideea，而如果存在无效字段则可以返回false并仅将计时器设置为隐藏消息。这里更新了jsFiddle：http://jsfiddle.net/kwyun/27/

Answer 2

我改变了你的代码。我倾向于缓存我的元素而不是一遍又一遍地实例化它们。我还创建了一个单独的函数，它将禁用/启用提交按钮，而不是取消绑定click事件，因为我认为这比解除绑定点击更加用户友好。最后，我添加了一个变量，它将根据验证返回true / false，这样就不会提交表单，直到所有内容都符合您的要求。

的 See working jsFiddle demo: 的

缓存元素

var $submit = $('#submit'), $statue = $('#statue'), $title = $('#title'), $content = $('#content'), $type = $('#type');

提交Click Handler

$submit.click(function() { var continueSubmit = true; if ($title.val().length < 10) { $statue.append('<br />Title needs more than 10 letters.'); disableEnable(true); continueSubmit = false; } if ($content.val().length < 20) { $statue.append('<br />Content needs more than 20 letters.'); disableEnable(true); continueSubmit = false; } if (!$type.val()) { $statue.append('<br />You must select 1 type.'); disableEnable(true); continueSubmit = false; } return continueSubmit; });

禁用/启用提交按钮的功能

function disableEnable(isDisabled) { if (!isDisabled) { $statue.html(''); } $submit.prop('disabled', isDisabled); setTimeout(function() { disableEnable(false); }, 5000); }

Answer 3

Hiya 工作演示：http://jsfiddle.net/kwyun/17/

使用e.preventdefault或更改提交type = "button"

<强> 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="button" name="submit" id="submit" value="submit" />
</form>
<div id="statue"></div>

希望这会有所帮助欢呼声

Answer 4

你应该致电e.preventDeault()

我更新了jsfiddle

http://jsfiddle.net/kwyun/9/

Answer 5

首先，您需要在验证失败时返回false（或使用event.preventDefault），否则提交将继续正常进行。其次，你必须做一些事情来防止在你想要的5秒钟等待期间发生提交。只是取消绑定处理程序将不会，因为它将默认为正常提交，我想你不想要那样，对吧？

我建议，而不是解除绑定，将其绑定到另一个函数，该函数在返回false时以静默方式退出。在这5秒钟之后，再次将其绑定到原始函数。

编辑：还要注意bind需要第二个参数，即绑定到事件的函数。用一个参数调用它是行不通的。检查第二种形式，即接受boolen（preventBubble）的形式：这可能是你需要的：

$('#submit').bind("click",false);
setTimeout(function (){
    $("#statue").html("");
    $('#submit').bind("click", yourFunction); // Remember to keep a reference to your function somewhere
}, 5000);

Answer 6

我也更新了你的小提琴。看一看。

jsfiddle

jquery表单检查，如果值为空，则取消绑定提交单击

6 个答案:

缓存元素

提交Click Handler

禁用/启用提交按钮的功能