I need to make sure that a certain field only takes numbers as after some default alphabetic characters Like XXX-XX-1234. Here XXX-XX- are default characters which shouldn't be removed. After these alphabets I want the user to be unable to type in any characters other than numbers.
Is there a neat way to achieve this?
You can do with input regex pattern too
<input type="text" name="my_name"
pattern="[A-Za-z]{3}-[A-Za-z]{3}-[A-Za-z]{3}-[0-9]{4}" title="my title">
in your case (removing the number)
<input type="text" name="my_name" value="ABC-DE"
pattern="[A-Za-z]{3}-[A-Za-z]{2}-" title="my title">
Here is a FIDDLE
I wish I could have made this a comment on #scaisEdge 's answer because I just built off of it to add a little more helpful stuff but it is just too much to fit in a comment:
HTML:
<form>
<button>submit</button>
<input type="text" name="name1" value="ABC-DE-" pattern="[A-Za-z]{3}-[A-Za-z]{2}-\d{4}$" title="LLL-LL-DDDD - L is any letter, D is any digit" />
<input type="text" name="name2" value="XXX-XX-" pattern="XXX-XX-\d{4}$" title="XXX-XX-DDDD - D is any digit, rest as is" />
</form>
I used his answer as a base, then did the following to illustrate more:
I added "\d{4}$" to the end of the regex pattern to force 4 numbers then nothing else
I added a new text input that showed how to force explicitly specific characters for the alphebetic/dash portion
I added titles with helpful pattern hints because those are shown in the popup when the pattern is rejected
I put it all in a form with a submit button to show how it all works together
What not to do
I spent a lot of time "rolling my own" code to make a version of a text input that specifically limited all actions on it up front (on input change, keydown, keyup, mouse click) to only allow putting in the last 4 digits and nothing else. It became a game of "chase the corner cases" and I quickly became convinced that using a plugin or library that is thoroughly vetted by the developer community is the way to go for such an endeavor, or using the pattern attribute as discussed above.
Not only was it "vertically oriented" toward this specific pattern, I failed even after much time to iron out all the corner cases and it remained broken.
I even gave an explanation of these difficulties and put up the code and my FIDDLE in this answer, but realized that putting up broken code is just not a good idea on StackOverflow so I made the appropriate edits just now to redo this explanation and get rid of the FIDDLE and code for the alternate route I tried.
Related
I found a very useful bit of JS from another thread for automatically hyphenating numbers, but a by-product of that is that now they've entered 10 numbers (US phone number) but if they want to delete and change it, they will have to delete the hyphens as well. I realize this is not a huge deal but it's annoying me and I wanted to find a better solution.
A couple of different options come to mind, just not sure what is possible:
Add/modify my code so that as they delete, it automatically removes the hyphens as they delete their numbers, so they are only pressing backspace 10 times instead of 12.
Have the appearance of hyphens in the text box but they are not actually in the text input area...just like a "background image" so to speak. I tried to do this with a background SVG for the text area but I was not able to solve the problem of automatically spacing out the phone number around the fake hyphens. As for this possible solution, I am fine with these being there all the time even before anything is typed, or appearing once they begin typing the number.
I have searched extensively but have not found anything for what I need. I am sure that a thread already exists but I just haven't searched for the right terms. if anyone has a link to one, even that would be amazing.
Here is my existing code...hopefully this is something I can accomplish with adding something simple. Any help is greatly appreciated.
$('#phone').keyup(function(){
$(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'))
});
Since the number is only formatted when a minimum of ten numbers are entered, you can try something like this.
$('#phone').keyup(function(){
if( $(this).val().length < 10 ){
$(this).val($(this).val().replace(/-/g, ''))
}else{
$(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'$1-$2-$3'))
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="phone">
I'm trying to restrict form input in a form that I have. The particular input is for an ID that has very specific requirements. An example of which would be:
YY.MM.DD-000.00
The code I'm working with to restrict it is:
<form>
<input type="text" class="form-control" id="nid"
name="nid" placeholder="#lang('app.nid')"
pattern="[00-99]{2}+\.[00-12]{2}\.[00-31]{2}+\-[000-999]{3}+\.[00-99]{2}"
title="YY.MM.DD-000.00"
value="" />
<button type="submit">
submit
</button>
</form>
And I can't seem to make it accept it. It seems refuses any input I give, both the bad and the supposibly good.
Can anyone help me figure out why?
It's because of those + in your regex. Not sure what you want there, but if you remove those it works. Those plus signs make your regex invalid.
Another problem was the - you escaped. This caused the regex not to work as well:
pattern="[00-99]{2}\.[00-12]{2}\.[00-31]{2}-[000-999]{3}\.[00-99]{2}"
You misunderstand how character groups [...] work in regexes: They define the characters that you can input so you don't need to repeat them and when you use them for months and days, you do need the higher numbers as well as you will not be able to input 09 for example (September or day 9 of the month).
So you need:
[0-9]{2}\.[0-9]{2}\.[0-9]{2}-[0-9]{3}\.[0-9]{2}
Note that I have also removed the + quantifiers and I am not escaping the - as that is only a special character in a character group. However, it works both with and without these.
You can see it here.
In our app, we have many inputs that are used to fill in school grades. Till now we had
<input type="text" name="mark">
As we're trying to use new features of HTML5, we changed it to
<input type="number" name="mark">
so on mobiles/tablets we have interface with only numbers. And there's the case. It is possible to place in input grades like "5+" and others (for example some two-letter shortcuts "ab" and other). It's customizable by users.
Is there any way to extend input to treat numbers and all that chars as valid WITH extending Android/iOS keyboard layout to only that?
EDIT:
Don't forget that i want to know if i can extend keyboard layout on mobile. If it's not possible, i'll fall back to text with some validation.
I believe you can use the pattern attribute for what you described:
A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.
https://developer.mozilla.org/en/docs/Web/HTML/Element/Input
e.g. <input type="text" name="HasAPattern" pattern="[0-9A-Z]{3}" title="Enter 3 characters">
will result in an input element that allows only 3 characters.
Unfortunately, custom keys are not allowable I believe, so you would have to use a text type that has an added numeric pattern with the attribute above.
Custom keyboards would have to be used for non-standard keyboard layouts/input buttons.
You would probably want just normal text field and use something like JQuery Validate to limit the input and throw warnings if a user enters incorrect data.
Another option would be to trow all possible option into a HTML select tag.
JQuery Validate plugin: http://jqueryvalidation.org/
you can use
<input type="text" name="mark" pattern="[a-z0-9]{2}">
You can specify your regular expression in the pattern and have any character whitelisted
For having 50+ kind of input use the following
<input type="text" name="mark" pattern="[0-9]{2}[+]?">
You could simply use,
<input type="tel" name="mark">
This would do it.
I'm testing my app on my mobile phone (samsung galaxy note II with chrome) and I have a problem with the numeric input fields.
In my app these fields can accept negative numbers, and on the browser it's all fine as I have the - button and also the arrow sliders (from html5) for choosing the number.
On the phone though the sliders are not rendered, and the browser recognise the input type=number, and just renders a simplified numeric keyboard, which doesn't contain the - sign, so I didn't see a way to insert the negative number I wish.
My app uses twitter bootstrap 2.3.2 with jquery, I'm not sure how to solve this problem.
here's the code for one of my input fields that work fine on my computer, but can't use them properly on my phone:
<input class="input-mini" data-type="distance_price" id="distance" label="false" name="distance" step="0.1" type="number" max="-0.1">
in the image you can see how the field in red is marked as wrong because it needs to be negative, but my keyboard doesn't let me insert symbols. including the - sign.
any clue?
The issue is specific to Samsung custom keyboard - hooray to vendors who think they're smarter than everyone. Here is another example of this issue at work
In short, there's no way to make the minus sign show up on Samsung Android numeric inputs. Here are a few workarounds I've run across:
1) Google Keyboard
The user can install a different keyboard (like Google Keyboard). Obviously not ideal to have people install something though.
2) Negate Button
As #Cris already suggested, add a button which will negate the value. If you've got the screen real estate then great.
3) Double Dot Trick
We ended up with a fairly ugly workaround where the user can press . twice and it will negate the number. Totally non-discoverable but an extra button wasn't an option for us.
https://gist.github.com/bendytree/936f6b9b4c0e10138b7e9158b5fd05d9
Make an extra input field. A "sign" checkbox, selecting natural or negative integers.
Then hook the onchange event of the checkbox so that you update the number view to reflect the chosen sign.
If you use the value attribute (value="-0.1") to load an initial negative value then you will have the minus sign pre-loaded for you.
<input class="input-mini" data-type="distance_price" id="distance" label="false" name="distance" step="0.1" type="number" max="-0.1" value="-1">
If you returned here because the Double Dot Trick from above stopped working... It seems an update to how input type="number" fields are handled keeps the second "dot" from even registering as a keystroke stopping the Double Dot from working. In my case, I changed the test line in the JS to
if (lastkey === "." && (key === "." || e.originalEvent.inputType == "deleteContentBackward")){
to create the equally hacky "Dot Backspace Trick"
Someone should be able to find this example for me or give an example..
After hours of searching I found the answer using some bizare search terms in Google only for my 15 month old to close the browser window for me without book marking it! I had private browsing on so it didn't save my history :-(
I have a web form, I need to pass the value of one form field to another form field at the same time replace the white space with underscore using JQuery.
example of what I'm looking for
<input name="PageName" id="PageName" type="text" value="All About Us Page" />
<input name="PageURL" id="PageURL" type="hidden" value="all_about_us_page" />
so when the form is submitted it gives nice formatted URLs to the page(s) I don't know much about JavaScript or JQuery and how to write variable to make it work.
Hope someone can give a working example, so at least I can get it working and in turn help someone searching in vien for the same solution the title of this should rank pretty high in Google for others to follow.
A little jQuery plugin to do something like this (this would put the value of the first matched element into the set of elements matched by the passed in selector):
$.fn.copyTo = function(selector) {
$(selector).val($(this[0]).val().replace(/\s/g, "_"));
};
Example usage:
$("#source").copyTo("#dest");
Here's a working example.
To copy the value from source, to dest, while replacing whitespace with an underscore, this should do it.
$("#dest").val($("#source").val().replace(' ', '_'));
Or to get any whitespace
$("#dest").val($("#source").val().replace(/\s/g, '_'));