enter 0 to 100 in text field using jquery regex - javascript

I need to enter 0.00 to 100.00 in text field using jquery regular expression. I am new for regex. Please help me how can I do this?
I do not allow to enter more than 100.00 or negative values.
var regex = "^\$(\d{1,3},?(\d{3},?)*\d{3}(\.\d{1,3})?|\d{1,3}(\.\d{2})?)$|^\d{1,2}(\.\d{1,2})? *%$|^100%$";
<input type="text" class="count">
How can I use this regex in textbox. I just want t allow only two numbers after decimal. Example (0.00 and 100.00 or 99.99) like this.

For modern browser is sugest the input type number
<form>
<input type="number" class="count" min="0.00" max="100" step="0.01">
<input type="submit"></form>

Related

Why does input[type='tel'] allow non-numerical characters to be entered?

Why does the input field allow alphabetic characters and not restrict the input to only numbers?
<input type="tel" id="phone" name="phone_number" placeholder="555-555-5555" pattern="\d{3}-\d{3}-\d{4}">
Because many country use char in the phone numbers like ’+-()’ space etc.
It does not restrict the types of characters that can be input, but browsers will prevent submission if the input value does not match your pattern.
If you do not want to allow certain character inputs, you can use JavaScript to remove those characters: onkeyup="this.value = this.value.replace(/[^0-9-]/g, '');".
input:invalid {
color: red;
}
<form>
<input type="tel" id="phone" name="phone_number" placeholder="555-555-5555" pattern="\d{3}-\d{3}-\d{4}" onkeyup="this.value = this.value.replace(/[^0-9-]/g, '');">
<input type="submit" value="Submit">
</form>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel
Andy's link to the documentation had the answer I was looking for.
the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world

how to allow input type number to accept alphabet

I want to enter full width number and turn it into half width using jquery but first I need it to accept characters that are not number.
<input id="text1" step="0.5" type="number" value="" name="text1">
I need type number because I want the step feature.
You can't make a type="number" field accept non-numeric characters. If you want to do that, you'll need to use type="text". (If you need the step feature, you'll have to implement it.)
If you want your text filed to accept floating numbers. Use following Input.
<input type="number" step="any" name="text1" value="">

How to only allow the numbers 0-5 in <input> fields with AngularJS?

I have an input field like this:
HTML
<input ng-model="newtodo.effort" ng-enter="addTodo()" type="number" min="0" max="5"
maxlength="1" size="1" step="1" class="form-control marginBottom"
placeholder="Aufwand" aria-describedby="basic-addon2" required></input>
JavaScript/Angular controller
$scope.addTodo(todo) {
restservice.addTodo(todo); // Does call to REST service backend
}
In the input field above I only want to allow integer values 0, 1, 2, 3, 4 and 5.
Not allowed are floats (e.g. 1.4), characters (e.g. foo) and values less than 0 or bigger than 5.
The input field may not be empty!
As you can see I am already using HTML5 input attributes for this but I know that I cannot rely on those. Additionally I also check server-side if the values entered are valid against my restrictions. So far so good, but in order to increase usability and responsiveness of my web app I also want to validate these values in JavaScript using AngularJS. How would I do that? I know that I could implement complicated value checks in $scope.addTodo(todo) and then output error messages to the user if the values he/she entered weren't ok but I somehow "feel" that there is a better, easier "angularish" way using RegEx and a 1-liner? If so, please explain to me how to do this the Angular way. Thanks!
You can add the following attribute to your input field.
ng-pattern="/^[0-5]+$/"
And validate as such:
function formCtrl($scope) {
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="formCtrl">
<form name="myForm">
<input type="number" ng-model="newtodo.effort" name="effort" ng-pattern="/^[0-5]$/" ng-enter="addTodo()" step="1" class="form-control marginBottom" placeholder="Aufwand" aria-describedby="basic-addon2" required>
<span ng-show="myForm.effort.$error.pattern">The number must be between 0-5</span>
<span ng-show="myForm.effort.$error.number">No characters allowed</span>
<span ng-show="myForm.effort.$error.required && !myForm.effort.$error.number">The field is required</span>
</form>
</div>
You can use ngPattern to set the regular expression which you want to validate against.
Reffer to the docs for more details: https://docs.angularjs.org/api/ng/directive/input

Phone Number Validation Angularjs

I am having a issue validating phone number. The phone number is a 10 digit string that should be populated in a three input field
1st input field - have only 3 digits only ( requires, can accept only numbers and max length 3)
2nd input field - have only 3 digits only ( requires, can accept only numbers and max length 3)
3rd input field - have only 4 digits only ( requires, can accept only numbers and max length 4)
and tab should be moved to next input field, when maximum number of characters have been implemented in the first one
the fields should be red, when none of the above conditions are not meeting
<label for="phoneone" aria-label="Enter First 3 digits of your phone no."><input id="phoneone" type="number" required name="phoneone" class="phone-text-box" ng-model="user.phoneNumbercodeone" ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/"></input></label>
<label for="phonetwo" aria-label="Enter second 3 digits of your phone no."><input id="phonetwo" type="number" required name="phonetwo" class="phone-text-box" ng-model="user.phoneNumbercodetwo" ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/"></input></label>
<label for="phonethree" aria-label="Enter last 4 digits of your phone no."><input id="phonethree" type="number" required name="phonethree" class="phone-text-box" ng-model="user.phoneNumbercodethree" ng-minlength="4" ng-maxlength="4" maxlength="4" ng-pattern="/^[0-9]*$/"></input></label>
<div class="clearfix" ></div>
how would i achieve the above validation conditions using input html tag
You should use input pattern validation. This can be done using the ng-pattern directive:
NgPattern sets pattern validation error key if the ngModel value does not match a RegExp found by evaluating the Angular expression given in the attribute value. If the expression evaluates to a RegExp object, then this is used directly. If the expression evaluates to a string, then it will be converted to a RegExp after wrapping it in ^ and $ characters. For instance, "abc" will be converted to new RegExp('^abc$').
Note: Avoid using the g flag on the RegExp, as it will cause each successive search to start at the index of the last search's match, thus not taking the whole input value into account.
There are a couple of small issues with your code. Specifically I am looking at ng-minlength="3" ng-maxlength="3" maxlength="3" ng-pattern="/^[0-9]*$/". You can achieve your number validation using the html5 properties of min and max on your input. So your input would look something like this:
<input id="phoneone" type="number" name="phoneone" class="phone-text-box" ng-model="user.phoneNumbercodeone" ng-minlength="3" ng-maxlength="3" min="100" max="999" />
And then you can run validations against that using something like this:
<div ng-show="phoneForm.phoneone.$invalid && phoneForm.phoneone.$dirty">
<div ng-show="phoneForm.phoneone.$error.minlength || phoneForm.phoneone.$error.maxlength">This must be a 3 digit number</div>
</div>
Of course exchanging out phoneForm for the name of your form.

Validate 0.5 as Step Value in HTML5 Number Input

I want to have an input field which only allows to type whole numbers or .5 decimal numbers. e.g. 0, 0.5, 1, 1.5, 2, 2.5.......etc etc
I am trying to do this with a HTML5 input field as so
<input type="number" min="0" max="18" step="0.5" pattern="\d+" />
but it won't validate the number when it is on a half step of 0.5. It just stays red when clicking outside / validating.
Is this possible? I can't find similar example of how to validate for half steps. DO I need to use jQuery to achieve this?
Thanks
Fiddle Demo http://jsfiddle.net/b8NrE/906/
Remove the pattern attribute. This is used for complex validation that requires regular expressions (and your regular expression is only matching sequences of digits). As it is, stipulating min, max, and step already define all the validation that you need:
<input type="number" min="0" max="18" step="0.5" />
http://jsfiddle.net/b8NrE/907/
You can try this: It will clear text box if step is not .5
<input type="number" min="0" oninput="validity.valid||(value='');" step="0.5" />

Categories