Parsley.js - Validate optional input for only numbers - javascript

I have a form that has one optional input and 3 required input fields. For the optional input I have the below markup:
<input type="number" placeholder="0" min="0" max="20000" step="100" data-parsley-validation-threshold="1" data-parsley-trigger="keyup">
This does not fire the validation if I have type in letters or any other characters. It does validate for min and max values. If I put required attribute it does seem to work but I don't want that. I also tried defining a pattern as below:
data-parsley-pattern="^[0-9]*$"
None of them seem to work. Any ideas?

You can use data-parsley-type="digits". Notice the use of type="text" instead of number.
This works if you only want to allow digits (not floats).
<input type="text" placeholder="0" min="0" max="20000" step="100"
data-parsley-validation-threshold="1" data-parsley-trigger="keyup"
data-parsley-type="digits" />
If you want floats, you can use data-parsley-type='number':
<input type="text" placeholder="0" min="0" max="20000" step="100"
data-parsley-validation-threshold="1" data-parsley-trigger="keyup"
data-parsley-type="number" />

Related

Issue with number with decimal point value

I have a textbox which accepts "Percentage"value like below :
<input class="form-control" type="number" step="1" min="0" ng-pattern="/^[0-9]+(\.[0-9]{1,3})?$/" ng-model="$scope.taxPercentage">
When user enters "0.5202" then it works but when user enters ".5202" then the value is "undefined".
Now, user wants this textbox to accept value like this :
.5202
.3412
Now what is happening is when I print :
console.log($scope.taxPercentage); //undefined
How do I make this textbox accept percentage values with decimal points like "0.5202, .5202" etc?
This should do but there may also be a more readable regex than that
<input class="form-control" type="number" step="1" min="0" ng-pattern="^(\.[0-9]{1,3})|[0-9]+(\.[0-9]{1,3})?$" ng-model="$scope.taxPercentage">

IE11 minlength or pattern not validating + bootstrap

is there a way to validate minlength on my field in IE11? seems like is being ignored, I am using bootstrap 4.5 to validate my form also.
<input class="form-control" id="portVal" required="" type="text" pattern="[0-9]*" data-dpmaxz-eid="5" minlength="6">
However, seems like email pattern is validating email correctly, how can I update [0-9]* to configure a minimum number?
<input class="form-control" id="sEmail" required="" type="text" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$" data-dpmaxz-eid="4" data-nl-label="Email" data-nl-bindto="xpath" data-nl-ismandatory="true" data-nl-xpath="#email">
IE doesn't support the minlength attribute. You'll have to use the regex .{6,}, which matches 6 or more characters:
<form>
<input class="form-control" id="portVal" type="text" pattern=".{6,}" data-dpmaxz-eid="5" required>
<button>Submit</button>
</form>

HTML Implementing MaxLength but ignoring decimals

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>

"maxlength" is not working with input type="number" in html textbox

Maxlength is not working with type="number"
There is no maxlength attribute for number input.
There are max and min attributes instead.
This HTML will provide a number with the maximum length of 3:
<input type="number" min="0" max="999"/>
Note that it is still possible to enter bigger numbers manually.
Try this
<input type="number" max="100"/>
You should use this instead
<input type="number" name="MyInteger" min="1" max="99">

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" />

Categories

Resources