How do I force user to enter specific pattern in input field using regex and javascript

Question

I admit, I never explored into the regex albeit knowing its power. And its striking back to me. I am trying to make user enter pattern P99999999 into an input text where P is mandatory while 99999999 can take any digits(not letters). I'm triggering keyup, input field has uppercasing through styling and so far, this is what I have done (I know its too little).

inpt.value = $.trim( inpt.value );
if( inpt.value.indexOf( 'P' ) != 0 )
    inpt.value = inpt.value.replace(/[A-Z]/g, '');

After some exploring I come up with this

[P]+[0-9]+(?:\.[0-9]*)?

I do not know how to validate my input against this. This was generated by an online tool. I know it shouldn't be that hard. Any help.

Just remember that you still have to validate the input server side — aaronman
– aaronman, Commented Jun 25, 2013 at 16:46

Grim... · Accepted Answer · 2013-06-25 16:56:20Z

4

Try this:

P[0-9]{8}

That's a P, and then any number eight times.

If a P followed by any number of digits is valid, try

P[0-9]+

That's a P, and then any number at least once.

To make sure that this is all they enter, add ^ and $ (as mentioned in the comments):

^P[0-9]+$

A ^ is 'start of input', and the $ is 'end of input'.

So, your final code might be something like:

<input type="text" />
<div class="fail" style="display: none;">Fail!</div>

and

$("input").keyup(function() {
    var patt=/^P[0-9]+$/g;
    var result=patt.test($(this).val());
    if (result) {
        $(".fail").hide();        
    } else {
        $(".fail").show();        
    }
});

http://jsfiddle.net/fuMg4/1/

Finally, make sure you check this on the server side as well. It's easy to bypass client-side validation.

This tool is pretty handy: http://gskinner.com/RegExr/

edited Jun 25, 2013 at 16:56

answered Jun 25, 2013 at 16:45

Grim...

17k7 gold badges47 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Chris Farmer Over a year ago

You need ^ and $ to anchor the content, otherwise PPPPP00000000000000 is legal.

Grim... Over a year ago

True, true. I'll add a third example.

Bill Over a year ago

Also, OP asked how to validate against the input

CME64 Over a year ago

this won't be valid until you input the P and a digit character together at the first event , you have to account for the P alone ,, use * in place of + like I did

Grim... Over a year ago

But that makes an input of "P" valid, which (I assume) is no good.

CME64 · Accepted Answer · 2013-06-25 17:08:35Z

2

[updated to fix the stream input (hold key) issue]

here you go

regex [ it might look unconventional as there can be none (*) digits but think again, it is a live validation not the final result validation ]:

^P\d*$

code [edit: simplified]:

    $('input').on('change keyup keydown',function(){
        var txt = $(this).val();
        $(this).val(/^P\d*$/.test(txt)&txt.length<10?txt:txt.substring(0,txt.length-1));
    });

DEMO

edited Jun 25, 2013 at 17:08

answered Jun 25, 2013 at 16:54

CME64

1,67213 silver badges24 bronze badges

3 Comments

CME64 Over a year ago

I thought you wanted a captial P only :) .. it is good that it helped

andQlimax Over a year ago

how to format a date format dd/MM/YYYY ? I tried the same code with this pattern /^(((0[1-9]|[12]\d|3[01])\/(0[13578]|1[02])\/((19|[2-9]\d)\d{2}))|((0[1-9]|[12]\d|30)\/(0[13456789]|1[012])\/((19|[2-9]\d)\d{2}))|((0[1-9]|1\d|2[0-8])\/02\/((19|[2-9]\d)\d{2}))|(29\/02\/((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|(([1][26]|[2468][048]|[3579][26])00))))$/g but it doesnt work

CME64 Over a year ago

@andQlimax sorry for the late reply. wow what is that? this regex should be much simpler, it's an unrelated to the question but I'll help you out: ^(0[1-9]|[1-2]\d|3[0-1])\/(0[1-9]|1[0-2])\/\d{4}$

bastos.sergio · Accepted Answer · 2013-06-25 16:52:32Z

0

Why don't you use a third party plugin, like jQuery Mask Plugin...

Requirements like this have been implemented ad nauseum in javascript. You're trying to recreate the wheel, yet again.

answered Jun 25, 2013 at 16:52

bastos.sergio

6,7644 gold badges29 silver badges36 bronze badges

1 Comment

srijan Over a year ago

Yes Yes Yes! But, this is a part of a component which I really do not want to make dependent on anything else than jQuery. True, it will save time if I use mask but for a puny little thing like this, I feel like some home brewing is necessary.

cimmanon · Accepted Answer · 2013-06-25 17:13:42Z

0

Use the pattern attribute

http://cssdeck.com/labs/n8h33j1w

<input type="text" required pattern="^P[0-9]+$" />

input:invalid {
  background: red;
}

input:valid {
  background: green;
}

Be aware that older browsers will need a polyfill (namely, IE), as this is a relatively new property.

answered Jun 25, 2013 at 17:13

cimmanon

68.6k17 gold badges169 silver badges172 bronze badges

Collectives™ on Stack Overflow

How do I force user to enter specific pattern in input field using regex and javascript

4 Answers 4

5 Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related