jQuery初学者-按时间启动的功能

Question

I am a rookie in JS, have a problem understanding JQUERY semantics.

I have a function written for checking the content of a cell.

Problem: the function just starts when the cell loses focus, if I click Submit, the error shows first, then it will run the function.

I want the function to run even when I am inside the cell. How to do it?

Initiated by this:

$(".user_id").blur(function(){ validateUserId($('.user_id')); });

The function:

function validateUserId(reference) {
    if ( 5 == $(reference).val().length ) {
        $.get('index.php?user=' + $(reference).val(), function(data) {
            if ( "error" == data ) {
                $(reference).parent().parent().addClass('error');
                alert('error');
            } else {
                $(reference).parent().parent().removeClass('error');
                $(reference).addClass('valid');
                $(reference).parent().parent().addClass('success');
            }
        });
    } else {
        alert('short');
        $(reference).parent().parent().addClass('error');
    }
}

Answer 1

$(".user_id").on('keyup', function(){
   validateUserId($(this)); 
});

Answer 2

i would use the keyup event. So everytime somebody types a key in your input cell, the function will be executed.

 $(".user_id").on("keyup", function(){ validateUserId($(this)); });

I changed the $(".user_id"), you take the value from ,to $(this). Since you want the value of the field you did the keyup event on. (And not an other field, if there would be 2 fields with the same .user_id class.)

Answer 3

尝试在焦点事件上绑定功能

Answer 4

$("input[submit]").click(function(e){
    e.preventDefault();
    var valid = validateUserId($('.user_id')); // maybe the function could return a boolean value too instead of just adding classes to the HTML part
    if (valid) {
        $("#your_form_id").submit(); // only if the input is valid, submit it
    }
});

sidenote on your problem: if you click the submit button it will first trigger the submit action which may give you an error and then execute the blur() block of code

Answer 5

Here is a working demo http://jsfiddle.net/pomeh/GwswM/ . I've rewritten a little the code to:

• cache DOM selections into variables,
• use jQuery methods chaining,
• improve if conditions with tripe equal signs,
• separated AJAX calls and application logic,
• cache identical AJAX calls,
• use jQuery deferred to hide the asynchronous aspect of the verification (linked to AJAX)

Hope that'll help :)