html regex validation limit only one period on decimal input - javascript

I made a HTML input which accepts decimal only.
<input type="text" class="form-control" id="price" name="price" placeholder="Price"
onkeyup="this.value=this.value.replace(/[^0-9\.]/g,'')">
This is working. However I need to modify the regex to accept only one period
Correct: 9.999
Wrong: 9.9.99.99
Is there a way? please don't use jquery validate and html type="number" (Users doesn't want the up and down arrow when you set the input to type number) Thanks

Sharing this answer to limit one period on decimal input
replace
this.value=this.value.replace(/[^0-9\.]/g,'')
with
this.value=this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')

Related

How to set maximum number of characters in number type textbox?

I have one textbox which is of number type. I want it to accept maximum of 16 digits, not more than that. For that I have tried with "maxlength" attribue and "max" attribute both. But its not working. Can anyone provide me solution?
<input type="number" id="dummy" max="16" />
Edit: I need to enter only whole number since it is used for account number of bank.
There are a few of these "how do I further control type="number" fields" questions here on SO. It boils down to:
You make it a type="number" and accept that you can't further mask the input vs. what the browser does to implement a numeric input, or
You make it type="text" and use pattern and/or maxlength to enforce the specific pattern you want, and accept that the browser won't add a specific UI for numbers.
Input type number doesn't support "maxlength" attribute. You can specify "max" attribute (HTML5), which is the highest number user can input. Something like this: <input type="number" max="999999999999" id="dummy" step="1" min="0">.
Edit: Also specify step attribute to 1.

HTML Field Type Input Number Only or Letter Only Without JavaScript

I create a form, where one field should only be filled with numbers.
I want that field can be filled only with numbers since entering input.
Like this example :
How Can I Use Javascript to Allow Only Numbers to Be Entered in a TextBox?
I've tried using Regex, but when I try to input is still able to enter letters.
<input type="number" min="2" pattern="^[0-9]" class="andi_input required-entry" name="amount" id="amount" required title='Only Number' />
I want it when input to field and not after click the Submit button and the message appear and inform that the field can only be filled with numbers.
I also try to add validate-number, but the result is the same.
How, without javascript, so that the field can only be filled with numbers or letters?
Whether for this kind of case have to use JavaScript or is there another way without JavaScript?
HTML 5 uses the type="number" so make sure that the browser that you are using is compatible. Check it out in action here.
You should check browser compatibility.
You're right with <input type="number" pattern="^[0-9]" />.
Your regex rule is :
^[0-9] :
^ assert position at start of the string
[0-9] match a single character present in the list below
(0-9 a single character in the range between 0 and 9)
You can check your regex here.
I use to use HTML5 Validation and jQuery one because IE is capricious most of the time.
UPDATE :
Without Javascript it's not possible to check pattern on real time. I suggest you to use a jQuery library like : http://www.jqueryscript.net/form/jQuery-Plugin-For-Formatting-User-Input-with-Specified-Pattern-formatter-js.html.
Here is a OneLiner:
<input type="number" onkeypress="return /[0-9]/i.test(event.key)">
or
<input type="text" onkeypress="return /[a-z]/i.test(event.key)">

Use regex to do validation in g:TextField

I am working on a grails applications and want the ability to do validation on a g:textField. I just want to make sure that numbers are numbers and words are words. I would like to avoid doing it through JS but if that is the only way, then so be it. Here is what I am trying out.
<g:textField type="number" pattern="^(?:[-+]?[1-9]\d*|0)?(?:\.\d+)?\$" class="form-control" name="hours" value="${hours}"/></div>
Any suggestions or directions? Or should I just do it through JS?
So I was able to figure out the correct regex. The issue that I was having was about the escape characters and the way they were being interoperated.
<g:textField type="number" pattern="^[0-9]+\\s*\$|^[0-9]+\\.?[0-9]+\\s*\$" required="true" class="form-control" name="hours" value="${deliverable.estimatedHours}"/>
This will now check the format for an input string and make sure that it only contains numbers.

How to input float numbers in HTML form?

my code is as follows:
<input type="number" min="4.50" max="9.90" id="cpi" name="cpi" required="required" title="CPI" class="formfield3" />
CPI is a float value. But if I open it in browser and input value which is the float number such as 7.89 then it shows message of 'Invalid Value'. How to solve it?
Set step="any"
<input type="number" min="4.50" max="9.90" step="any" id="cpi" name="cpi" required="required" title="CPI" class="formfield3" />
The number type has a step value controlling which numbers are valid (along with max and min), which defaults to 1. This value is also used by implementations for the stepper buttons (i.e. pressing up increases by step).
Simply change this value to whatever is appropriate. For money, two decimal places are probably expected:
<input type=number step=0.01 />
(I'd also set min=0 if it can only be positive)
As usual, I'll add a quick note: remember that client-side validation is just a convenience to the user. You must also validate on the server-side!

Mobile Number Masking using Javascript?

I want to use masking for Mobile Number in javascript.In this masking, I want to fix (+91) then user can input mobile number(10 digit number)
<label>Phone Number</label>
<input type="button" value="Turn on Mask" id="maskon" />
<input id="phone" type="text" value="" />
$("#maskon").click(function(){
$("#phone").mask("(+91) 9999-999999");
});
If I am using the given masking then I am able to put any digit in place of 9 instead of it I want to have (+91) as fixed.
Is there any idea to solve this problem?
Thanks in Advance!!
I do not think that there is an option for making first few digits fixed for mask plugin.
However you could also write keyup event for textbox and write a regex that verifies that first three digits are +91. You can use this regex for that. /(\+\d{2})/

Categories

Resources