Question

I tried to write a jquery form check code, if value is empty / words lengh less than something, unbind submit click, show error hint in some div. then 5 seconds later, bind the submit click. Code in jsfiddle, but the bind/unbind not work as my wish.

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

I changed your code a bit. I tend to cache my elements instead of instantiating them over and over. I also created a separate function that will disable/enable the submit button instead of unbinding the click event, as I think this is more user-friendly than unbinding the click. Lastly, I added a variable that will return true/false depending on the validation, that way you don’t submit the form until everything is as you want it to be.

See working jsFiddle demo:

Cache Elements

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

Submit 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 to Disable/Enable Submit Button

function disableEnable(isDisabled) {

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

}