CODEWITHSUNDEEP
javascriptjqueryregex
jogesh_pi
jogesh_pi

Reputation: 9782

validate user input on keyup event with regex

I am trying to validate the input from the users with regular expressions here is my codes

$('input[name="payment_rate"]').keyup(function(){
    var data = $(this).val();
    var regx = /^[0-9]+$/;

    console.log( data + ' patt:'+ data.match(regx));

    if( data.match(regx) ){
        $('.amt_err').fadeOut('slow');
    }
    else{
        $('.amt_err')
            .text('only Numeric Digits(0 to 9) allowed!')
            .css({'color':'#fff', 'background':'#990000', 'padding':'3px'});
    }
});

here is the html part:

<input type='text' class="txtbox" name='payment_rate' size='8'>&nbsp;<span class="amt_err"></span>

i want only digits but my code is only working the first time. I mean if I type any comma or alpha character, the error shows. But if I remove the same with backslash and again type the comma or something other than digits the error is not shown, I don't know where the bug is in my code??

Please help me to find out the bug..

Upvotes: 2

Views: 10258

Answers (3)

Rahul Sekhar
Rahul Sekhar

Reputation: 2851

Change:

else{
    $('.amt_err')
        .text('only Numeric Digits(0 to 9) allowed!')
        .css({'color':'#fff', 'background':'#990000', 'padding':'3px'});
}

to:

else{
    $('.amt_err')
        .show() //Or fadeIn()
        .text('only Numeric Digits(0 to 9) allowed!')
        .css({'color':'#fff', 'background':'#990000', 'padding':'3px'});
}

Once the span is hidden, with fadeOut(), you need to make it show up again with a show() or a fadeIn()

Upvotes: 1

Doug Owings
Doug Owings

Reputation: 4448

You have not shown the .amt_err after you hide it on error. You do not see it initially because it is empty. Perhaps you want:

if( data.match(regx) ){
    $('.amt_err').fadeOut('slow');
}
else{
    $('.amt_err')
        .text('only Numeric Digits(0 to 9) allowed!')
        .css({'color':'#fff', 'background':'#990000', 'padding':'3px'})
        .fadeIn('slow'); // <- fade in here
}

Here's a jsfiddle

Upvotes: 1

Rob Cowie
Rob Cowie

Reputation: 22619

The first time the regexp matches (i.e. the content is 'valid'), the error message element is hidden with .fadeOut(). On subsequent error, the message and css are modified, but the element is not made visible.

The following works:

 $('input[name="payment_rate"]').keyup(function(){
    var data = $(this).val();
    var regx = /^[0-9]+$/;

    console.log( data + ' patt:'+ data.match(regx));

    if ( data === '' || data.match(regx) ){
        $('.amt_err').fadeOut('slow');
    }
    else {
        $('.amt_err')
            .text('only Numeric Digits(0 to 9) allowed!')
            .css({'color':'#fff', 'background':'#990000', 'padding':'3px'})
            .fadeIn('fast');
    }
});

In addition, the error message is hidden on zero-length string (i.e. empty). Not sure if that is required, but I'm guessing it is. See http://jsbin.com/uhelir/edit#javascript,html

Also, have a look at http://www.zurb.com/playground/jquery-text-change-custom-event, a jQuery plugin that provides a 'text-change' event which is a nicer way to determine when a user has finished typing (and it won't fire if the text hasn't changed, reducing processing overhead).

Upvotes: 1

Related Questions