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

Question

我尝试编写一个 jquery 表单检查代码，如果值为空/单词长度小于某个值，则取消绑定提交单击，在某些 div 中显示错误提示。然后5秒后，绑定提交点击。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 秒间隔内单击，表单将提交。

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

Answer 2

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

请参阅工作 jsFiddle 演示：

缓存元素

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

提交点击处理程序

$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需要第二个参数，即绑定到事件的函数。仅仅用一个参数调用它是行不通的。检查第二种形式，即接受布尔值（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