HTML Implementing MaxLength but ignoring decimals - javascript

I'm implementing a text box in HTML with the MaxLength attribute. I want it to be 4 digits only but ignoring decimals. So a user should only be able to write a number from 0 to 9999. however, I want them to be able to add decimals like 9011.22. What would be the best way to go about implementing this? Will it need some kind of javascript?
here is my HTML tag:
<input type="text" name="lastname" value="Mouse">

Use the number type, it will allow you to set a min and a max. You can then use the step attribute to control the number of decimals.
You can add the required property to make this field required.
You can use this.checkValidity() in the onblur event to validate before submitting.
<form>
<input type="number" name="lastname" value="Mouse" min="0" max="9999" step="0.01">
<p><input type="submit" value="Submit"></p>
</form>

Related

Angular.JS - only allow up to a certain number value in an input number field

I'm trying to understand a way with angular where I can only let the user enter a number that isn't more than 24 or in my other input 60 to represent hours and minutes.
<input type="number"
placeholder="HH"
ng-minlength="2"
ng-maxlength="2"
required
ng-model="session.timeHH">
<input type="number"
placeholder="mm"
ng-minlength="2"
required
ng-maxlength="2"
ng-model="session.timeMM">
This is my HTML at the moment.
The user can enter in the hours input a number like 99 which is obviously going to be wrong. I'm looking for a way to validate or prevent the user before submit to only be able to enter numbers up to 24 for hours and 59 for minutes.
Or even on the click of the submit button would be sufficient.
Not angular, but why not use the HTML attributes? Angular is hip to these and you can check the $valid property of the form to make sure the constraints are satisfied.
<input type="number" min="0" max="24" step="1">
How about just HTML5 since you're already using type="number":
<input type="number" name="hours" min="1" max="24">
Be sure to also validate input on the server side.
If you want to restrict numbers use a dropdown, otherwise you'll have to use native min and max attributes with validation.
Why not make use of the type properties to the inputs as time, this will open a time selector on modern browsers and mobiles
https://plnkr.co/edit/TAwugxjQHcMtJONQJgWA?p=preview
<input type="time"
placeholder="HH:MM"
required
ng-model="session.timeHH">
You can use some angular mask lib that provides masking features.
The ones you could use are, for example, angular-input-masks, ui-mask or ngMask.

Angular text form with numbers only?

So I have an input form in Angular here:
<input ng-model="sc.zip" class="form-control" maxlength="5" type="text" />
I don't want type="numbers" because the form needs to be a plain empty textbox. However, I only want the user to be able to type numbers. Either I need to detect when the input is not a digit, or be able to search through the box to find non-digits when submitting.
Either way, I need to validate that the form is digits only. Any help would be appreciated!
use regex
<input name="title" type="text" ng-model="sc.zip" ng-pattern="/^[0-9]*$/" required/>

How to perform inline validation in Knockout on an input field

I want to allow the user to only enter postive numbers and numbers less then 100.
How can i modify this input markup to get my required validation.
<input data-bind="value : $root.rootData.Page" class="form-control">
Edit: I know i can validate in JS, but for my particular case i want to do it solely in the makrup.
You can use regular expressions with HTML5 using the pattern attribute.
How can I validate number between 1 and 99 using regular expression? - Will give you some information about different ways to check if a number is between 1 and 99
From your example, you could use the following
<input data-bind="value : $root.rootData.Page" class="form-control" pattern="^[1-9][0-9]?$">
instead of using regex to match a number field, why not just use the number type and provide min/max?
<input type="number" min="1" max="99" step="1" data-bind="value : $root.rootData.Page" class="form-control" />
Regex could be used in combination with number type as a fallback, since FF support for the number type is lacking:
<input type="number" min="1" max="99" step="1" pattern="^[1-9][0-9]?$" data-bind="value : $root.rootData.Page" class="form-control" />

Limit input tag only for specific word or number

I have an input tag <input maxlength="2" />
I want to limit input for tag above, just for number 1,2,3,4,5,6,7,8,9,10 only
Is anyone know how to do something like that?
You can do it without javascript, just:
<input type="text" name="fieldname" pattern="10|[1-9]" title="Only 1-10">
http://www.w3schools.com/tags/att_input_pattern.asp

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!

Categories

Resources