CODEWITHSUNDEEP
jqueryvalidation
MaxNagler
MaxNagler

Reputation: 69

jQuery: How can I valide input field during typing?

My current code is like this and is click-based, not typing-based:

$(document).ready(function()
{

$('#btn_send').on('click', function() {

content_input_username = $('#input_username').val();

$.post('system/check_username.php',
        {
            'content_input_username':content_input_username
        },
        function(responseText)
        {
            if(responseText == 'false')
            {
                $('#username_info').html('username available');
            }

            if(responseText != 'false' && responseText != 'sql_error')
            {
                $('#username_info').html('user name not available');
            }



        }
    );

}); // /button-click

});

How can I achieve that the input field is being permanently validated during typing? What do I need to change?

Upvotes: 0

Views: 5881

Answers (4)

NobleUplift
NobleUplift

Reputation: 6005

This is essentially Bart's solution (go upvote!). I wanted the OP to have a complete code example, and to direct attention away from the keyup event, which we both thought was the wrong way to go.

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

$(document).ready(function() {
    $('#input_username').on('change input', debounce(function() {
        content_input_username = $('#input_username').val();

        $.post('system/check_username.php',
            {
                'content_input_username':content_input_username
            },
            function(responseText)
            {
                if(responseText == 'false')
                {
                    $('#username_info').html('username available');
                }

                if(responseText != 'false' && responseText != 'sql_error')
                {
                    $('#username_info').html('user name not available');
                }



            }
        );

    }, 250));
});

Here is my source for using 'change input'.

Upvotes: 0

Bart Calixto
Bart Calixto

Reputation: 19705

2 things here.

First you should change the click event to input or change (more on this later) event.

Since you are doing an ajax request, is not ideal for everykeystroke so 'change' is a good alternative, but, it will only fire when you lose focus on the input, which can make it rather annoying.

'input' to the rescue. The input event will fires for every keystroke, but you must take some considerations since if I type "bart" it will just fired 4 request with a race condition and that's totally bad. You should throttle validation so, you do the request if user stopped typing for lets say, 3 secs.

Also note that 'input' is not available on older browsers, but you can add change also for older browsers like : .on('change input')

notes on: keyup this event will fire even you use the cursor to move right left or replacing a letter with the same letter while input will only fire if the input changes. So I will stay away of keyup event.

Upvotes: 2

suren
suren

Reputation: 981

<input type="text" onkeypress="validate()">

$(document).ready(function()
{

function validate() {

content_input_username = $('#input_username').val();

$.post('system/check_username.php',
        {
            'content_input_username':content_input_username
        },
        function(responseText)
        {
            if(responseText == 'false')
            {
                $('#username_info').html('username available');
            }

            if(responseText != 'false' && responseText != 'sql_error')
            {
                $('#username_info').html('user name not available');
            }



        }
    );

}

});

Upvotes: 0

Hannan Hossain
Hannan Hossain

Reputation: 740

You can use the keyup event handler

$('#input_username').on("keyup", function(){
    //do your validation here.
    content_input_username = $('#input_username').val();

    $.post('system/check_username.php',
    {
        'content_input_username':content_input_username
    },
    function(responseText)
    {
        if(responseText == 'false')
        {
            $('#username_info').html('username available');
        }

        if(responseText != 'false' && responseText != 'sql_error')
        {
            $('#username_info').html('user name not available');
        }

    });
});

Upvotes: 0

Related Questions