jQuery在不到xx秒内禁用表单提交

I have a user registration form.I need to check if user form filled in less than xx seconds(5 seconds). If less than 5 seconds disable the form submit. Some thing like that disable the submit button click or return false or like that.

I wrote some jquery scripts.But not correctly working.

Here is the sample form.

<form id="registerform" class="registerform" method="post"/>
   <input type="text" name="username" id="username" />
   <input type="text" name="email" id="email" />

   <input type="submit" name="submit" id="submitBtn" value="Submit" />
</form>

Here is the jquery scripts.

<script type=javascript>
jQuery.noConflict();
jQuery(document).ready(function ($) { 

     var typingTimer;    //timer identifier
     var doneTypingInterval = 5000;  //time in ms, 5 second for example

     var checktime = 0;

     jQuery('form#registerform').find(':input').each(function(){
        jQuery(this).keyup(function(){
            typingTimer = setTimeout(doneTyping, doneTypingInterval);
        });

        jQuery(this).keydown(function(){
            clearTimeout(typingTimer);
        });

    });



    function doneTyping () {
        checktime = typingTimer;
        return checktime;
    }

    jQuery('form#registerform').submit(function() {
        checktime = doneTyping ();
        var timerInsec = (doneTypingInterval/1000);
        if(checktime < timerInsec) {
            return false; // disable form submit
        } else {
             // if user take to fill the form more than 5 seconds, submit the form
            return true; 
        }
    });

});
</script>

I need to integrate to the wordpress registration form.That's why I tried. If anyone have a solution/solutions to this please help me. Really appreciate that.

Thank you

This will disable your submit button for 5 seconds:

var submitButton = $('#submitBtn');
submitButton.prop("disabled", true);
setTimeout(function() {
   submitButton.prop("disabled", false);
}, 5000);

Online example

You would also want to make sure, that the malicious user doesn't submit the form by other means! Make sure to run server-side validation:

if ( isset($_SESSION['last_submit_time']) ) {
    $delay  = intval($_SESSION['last_submit_time']) + 5;
    if ( time() < $delay ) {
          $_SESSION['last_submit_time'] = time();
          echo "You must wait for 5 more seconds before submitting. Timer reset.";
          exit;
    }
}

typing timer does not contain the time , instead it contains an id for the timer thats currently ticking...and since key up will always set it to some value, it will never be false. Also, you add add and reset timer for each input. If you want the user to spend at least 5 seconds to fill in your form, dont enable the submit button until 5 sec has passed.

function doneTyping () {
    checktime = typingTimer;//will always have a value that evaluates to true
    return checktime;
}

Try that... HTML:

<form id="registerform" class="registerform" method="post">
    <input type="text" name="username" id="username">
    <input type="text" name="email" id="email">

    <input type="submit" name="submit" id="submit" value="Submit">
</form>

jQuery:

jQuery(document).ready(function ($) { 
    var intervalTime = 5000,
        inputID      = "#submit";



    function initialize(interval, input) { 
        intervalTime = interval;
        inputID      = input;

        jQuery(inputID).prop("disabled", true);        
        startCouting();
    }



    function startCouting() {
        setTimeout(function() {
            enableInput();
        }, intervalTime);
    }



    function enableInput() {
        jQuery(inputID).prop("disabled", false);
    };



    initialize(5000, "#submit");
});