Is it possible to restrict a form field in HTML with Jquery/Javascript to only 3 decimals . What I mean is that: 33.334 should be allowed as input 3.344 & 444444.556 etc. as well but it should not allow 5.6664 etc.
How can I do that?
You don't need jQuery to do that. Just use pattern attribute of <input> like this
<input type="text" pattern="^\d+\.\d{0,3}$">
The above would work on most browsers but if you want to support some old browsers, you would bind that <input> on a key-based event and check for the value using the above regex and restricting the user input.
$('input').on('blur', function () {
if (!/^\d+\.\d{0,3}$/.test($(this).val())) {
alert("Must be a number upto 3 decimals!");
}
});
DEMO
Press Enter to see pattern in action. Click elsewhere to see jQuery in action
Related
Background
I have a page that has 3 input elements which takes currency numbers
These input element of type number with jQuery handles which letting up to 2 decimal placing. If user tries to input 3rd decimal, it does not print which is great.
However...
Issue
When input already has valid 2d.p input such as 12.11 and wishes to highlight the field characters (such as click drag highlight to blue) to change/overwrite all, the jQuery handler think that its 3rd decimal input and does not print BUT what it actually needs to do is to overwrite the whole and start from the beginning.
So
Is there a way to check if the input field characters are highlighted?
I know that there is a way around this if my input has type="text" and just use selectionStart and selectionEnd BUT I want to keep it as type="number".
Code: jsfiddle DEMO
Any other suggestion to jQuery code handling 2 decimal place, I would appreciate
If I am understanding your issue correctly, try the following minimal update to detect if the user has 'highlighted' the input value:
if (CharAfterdot > 3 && !window.getSelection().toString()) { return false; }
So if a 'selection' is found via the above method (not empty / undefined) the code allows further input (in your case overriding via highlight).
Updated fiddle:
https://jsfiddle.net/qtr30w05/3/
I have a this form:
<html>
<form name=“test” action=“test.php”>
<input type=“text” name=“surname” pattern=“.{3,}>”
<input type=“submit” value=“send”>
</form>
I want that the “surname” field has at least 3 characters and for this reason I added the pattern attribute (I use HTML5) but in this way I check this every time the user clicks the "send" button while I want to check this every time the user edits the "surname" field without using javascript but only HTML5.
Is it possible?
you need to add client-side javascript to your form before php processing,
to check the input sequence or pattern of letters and numbers you need to add a regular expression to check the value of the input
It is not possible without using JavaScript. See the HTML5 specification for more details. However you can change the CSS as an indication of an invalid value:
input[pattern]:invalid {
color:red;
}
I have a field that accepts the year, so I have created
input type="number"
and implemented keydown event to restrict user to enter more than 4 digits.
Now I'm facing an issue and need help in figuring out the logic. Following is the case:
Enter 4 digits in the textbox
Select entered text using SHIFT + Arrow Keys
Now if you type a number it should replace the data but since I have barred it, it will not. Need to cover this case.
Also find code in following JSFiddle.
I also have lot of css and validation on input[type=number], so cannot change to input[type=text].
Also same form is used on mobile devices, and when user selects textbox, numeric keyboard should appear.
Edit 1
while searching for option, I found a JSfiddle that could direct us to right direction.
Issue here also is input[type=number] does not support selection property. Reference
As an alternative, we have decided to move to input[type=tel]. This would work in similar fashion, but will allow us to use maxLength attribute. Still if anyone has a better way, please share.
HTML:
<input type="tel" class="year" maxlength="4" data-temp="">
jQuery:
$(document).on('input', '.year', function(){
var txt = $(this).val();
if(isNaN(txt) || txt > 9999){
$(this).val( $(this).data('temp') );
return;
}
$(this).data('temp', txt);
});
JSFiddle
May be this will work , you can use the Regular Express to validate only number and
^[0-9\.\-\/]+$
and also you can use the .length method to insure that you have specific length
You can't submit an invalid value in this case:
<form>
<input type=number min=0 max=9999 required />
<input type=submit value=Submit />
</form>
So I have moved my code to input[type=tel] and Updated JSFiddle
If you check, I have added 2 events
Keydown to restrict from entering any invalid key.
Blur event to check if entered value is number only or not.
Now you might be thinking, if I have already restricted user to enter only number, how can he enter incorrect value.
Explanation
In my implementation, I have used keydown and using keycode, I'm allowing/blocking. Interesting case is when user press and holds shift key. Now on keydown, I get same keycode but value is different(A special character). So checking the integrity on blur.
A better way would have been handling keypress and keydown together and I'll update fiddle and update my answer, but for now I guess this has solved my problem.
Thanks you all for all comments/answer. Also kindly let me know if there are any better ways to implement.
I have a dynamic JavaScript rules engine in which based on criteria such as a dropdown is not changed, then I prevent any characters from being entered with:
$(document).on('keypress',"[id^="+condtionID+"]", function(event){
event.preventDefault();
});
However, if I change the dropdown to a value which does allow for any character, the textbox refuses to then allow for input.
Examples of IDs:
Select: ID="selectNumber435"
Input: ID="condtionID435"
Every row dynamically created into the table ends with the same random number created.
Problem is that once I do not allow any input, I tried:
return true; did not work
Even another condition in which I only allow numeric, I change to a dropdown value that allows for all input and it "holds on to" thinking it should ONLY allow numeric.
I would prefer to not have to make the user delete the dynamically created row, there has to be a way to allow for typing characters into the input box again. Some sort of "Reset" ...
You can simply dettach the attached event:
$(document).off('keypress',"[id^="+condtionID+"]");
We have an order form which takes credit cards from mobile browsers: <input type="number" id="txtCCNumber" />
Also in addition to that we have a JavaScript which removes any non-integer characters that are inserted into the field:
$('input#txtCCNumber').keyup(function(e)
{
var ccnum = $(this).val();
$(this).val(ccnum.replace(/[^\d]/g, ''));
});
However we just realized that it appears that when people using an iPhone try to put their credit card in, iPhone automatically adds a comma every 3 numbers (because of the JavaScript).
Does anybody know a way to fix this JavaScript so it works?
I do not want to use type="tel". That is not a solution in this case.
Personally, I don't think credit card numbers are an appropriate use of input type="number". According to the spec:
The input element with a type attribute whose value is "number" represents a precise control for setting the element’s value to a string representing a number.
Credit card "numbers" are strings of digits, but they don't identify a particular numeric value, and it wouldn't make sense for a user to enter a credit card number using the up and down arrows that some browsers attach to the input field. Your best bet is simply to use input type="text".
Also, attaching that JavaScript to the keyup event is going to annoy people like me who want to enter their credit card number with separators because it's easier to spot check. Just let people enter their card number however they like and normalize it later.
I don't see a reason why you're using type="number" for a Credit Card number field since you're anyways removing non integer values using JS. Using type="text" would be apt here.
I created a fiddle and tested this on my iphone and it works properly.
http://jsfiddle.net/MH8gj/