2

Here, I have blocked to type special characters for all input type in my mobile browser. But it will allow all alphabets and numbers.

My requirement is to allow the users to type only / (forward slash) for particular field (for example: Date field).

Is it possible in a simple way?

Instead of assigning class name for all input types except for the particular field which I need / (forward slash)?

   $(document).on('keypress','input', function(event){  
    var regex = new RegExp("^[a-zA-Z0-9]+$");
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    if (!regex.test(key)) {
       event.preventDefault();
       return false;
    }
});

Note: I need to allow forward slash to particular class instead of doing all input fields.

Simple: I need to block special characters for all input fields expect the particular class (let's say )

I'm not asking for the solution with the same regex function. I need separate click event to allow only slash for the particular class 'someclassname'

Improve this question
5
  • 1
    Yes, you need to escape it with \: \/ Commented May 18, 2015 at 7:30
  • Use reverse slash to escape chars. \/ outputs /. Commented May 18, 2015 at 7:32
  • But that will applicable to all input fields right? I need to allow forward slash to particular class instead of doing all input fields Commented May 18, 2015 at 7:32
  • possible duplicate of Javascript regex replace single slash in to double slash? Commented May 18, 2015 at 7:34
  • @edi9999: can't understand my question? I m not asking for the solution with the same regex function. I need to allow slash for the particular class Commented May 18, 2015 at 8:42

3 Answers 3

Reset to default
4

You can add the / into your regex as the following code:

 new RegExp("^[a-zA-Z0-9\/]+$");
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Or, simplier, ^[\w|\d|\/]+$. I'd suggest OP to use HTML5's data attributes to mark the "special (date?) inputs", for example <input data-type="date" /> or simply <input data-date/>.
Add starting ^ and trailing $, I missed them in the original comment :) and I think g modifier is useless here...
^[\w|\d|\/]+$ is not a correctly written regex, since you are using [] like (). What you suggest can be written as ^[\w\d\/]+$ which means 1 or more alphanumeric and digit characters with _ and / from start to end. So, it is not the same as ^[a-zA-Z0-9\/]+$ as it also allows _.
@Jack: inside a character class the pipe | has no special meaning, it is a literal character and doesn't mean "OR"
I didn't know _ is considered a normal character included in \w. ^[\da-zA-Z\/]+$ should be fine then :) ... or even ^[\w\/][^_]+$. Regex ways are infinite :P
|
2

You can check whether focused input has a class of your date input or its type is date using the function is. Then you can combine another regexp with your previous expression. Code:

$(document).on('keypress','input', function(event){
    var regex = new RegExp("^[a-zA-Z0-9]+$");
    if($("input:focused").is(".classname"))
    {
        regex = new RegExp(regex.source + "|\/");
    }
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    if (!regex.test(key)) {
       event.preventDefault();
       return false;
    }
});

P.S. I am not 100% sure about the code of combining of 2 regexps, just wrote by memory. If doesnt work you can simply add another check, if a string equals to /.

Improve this answer

5 Comments

Changed ur code little bit. But it allows forward slash to all elements which has focus....how to resolve this problem? but i gave only classname for the particular field\
Try to change the condition to: $("#form-id-if-there-is-one input.class-name:focus").length > 0
couldn't get you @zazu
change the condition inside the first if to: if($("#form-id-if-there-is-one input.class-name:focus").length > 0) { regex = new RegExp(regex.source + "|\/"); }
u mean like this?adding if condition $("#formid input .classname:focus").length > 0
1

To switch between the two regexes, I'd use this:

var regex = $(this).data('date') ? /^[a-zA-Z0-9\/]+$/ : /^[a-zA-Z0-9]+$/;

Adding data-date to date inputs, like:

<input data-date placeholder="I allow slashes" />
<input placeholder="No slashes here" />
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.