javascript - validate user input on keyup event with regex - Stack Overflow

admin管理员组

文章数量:1388089

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 ma or alpha character, the error shows. But if I remove the same with backslash and again type the ma 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..

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 ma or alpha character, the error shows. But if I remove the same with backslash and again type the ma 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..

• javascript
• jquery
• regex

Share Improve this question Follow edited Nov 17, 2011 at 11:01 Yes Barry 9,88655 gold badges5353 silver badges7474 bronze badges asked Nov 17, 2011 at 10:46 jogesh_pijogesh_pi 9,78255 gold badges3838 silver badges6565 bronze badges 4

• "i mean if i type any ma or alphabet the error is show but if i remove the same with backslash and again type the ma" What did you mean by "remove the same with backslash"? Did you mean to write "backspace?" – Yes Barry Commented Nov 17, 2011 at 10:54
• 1 Don't use keyup, it's not great for input detection. See whattheheadsaid./2010/09/…. – Andy E Commented Nov 17, 2011 at 10:56
• @mmmshuddup, i mean the error is shown just one time if the condition return false(means error) but if remove the error and again enter the invalid charters then it still true(means not error), hope you understand – jogesh_pi Commented Nov 17, 2011 at 11:00
• gotcha. thanks. the other guys got the solution right already though. Cheers! – Yes Barry Commented Nov 17, 2011 at 11:02

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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./uhelir/edit#javascript,html

Also, have a look at http://www.zurb./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).

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

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()

本文标签： javascriptvalidate user input on keyup event with regexStack Overflow