I'm stumped by the following problem. I have the following html input using AngularJS:
<input class="form-control" type="number" name="widgetQuantity" id="widgetQuantity"
ng-model="finalWidget.quantity" placeholder="Enter A Number" min="1"
ng-pattern="/^\d+$/" required/>
<p ng-show="widgetForm.widgetQuantity.$error.min" class="help-block">
You gotta order at least one.</p>
<p ng-show="widgetForm.widgetQuantity.$error.pattern" class="help-block">
No partial widgets, please.</p>
The ng-pattern directive catches the negative symbol and decimals, but it's not catching "e" input into the form. Any thoughts? Thanks!
Removing the type="number" requirement in the input field solved this issue -- apparently HTML validation will override errors from the angular side.
Related
I have this input:
<div class="form-group">
<label for="power">Hero Power</label>
<input [(ngModel)]="model.powerNumber" name="powerNumber" type="text"
class="form-control" pattern="^[0-9]+$"id="powerNumber">
<div [hidden]="powerNumber.valid" class="alert alert-danger">
power must be a number
</div>
</div>
I have added a pattern validator to the input field (only number should pass the test). Below the input I have added an error message that should hidden when the input field is valid. However it shows even when I have entered a value that matches the pattern RegExp. What am I doing wrong?
Here is a Stackblitz demonstration https://stackblitz.com/edit/template-driven-form-demo-wl3apt?file=app%2Fuser-form%2Fuser-form.component.ts
add #powerNumber="ngModel" template reference to input ngModel and all will be working. It is already done with name input in your example
I don't know whether it is eligible for you, however you can use input just for numbers:
<input [(ngModel)]="model.powerNumber" name="powerNumber" type="number"
class="form-control" id="powerNumber">
In the following form, the ng-pattern validation does not work.
The regex works as i expect in https://regex101.com.
It should show .custom-error div if the user enters some special character.
Where am I doing it wrong?
<form novalidate name="myForm">
<label for="subnet">only alphanumeric</label>
<input type="text" name="subnet" ng-model="subnet" class="form-control"
id="subnet" required ng-pattern="/[a-zA-Z\x7f-\xff]\s*/">
<div class="custom-error" ng-show="myForm.subnet.$error.pattern">
not in one of predefined characters
</div>
</form>
I think the ng-show="myForm.subnet.$error.pattern" is wrong. I read the official angular doc and i think you should try ng-show="!myForm.subnet.$valid" instead :
<input type="text" name="subnet" ng-model="subnet" class="form-control" id="subnet" required ng-pattern="/[a-zA-Z\x7f-\xff]\s*/">
<div class="custom-error" ng-show="!myForm.subnet.$valid">
not in one of predefined characters
</div>
It hope it will help you
Change the ng-pattern code to ng-pattern="/^[a-zA-Z\x7f-\xff\s]*$/". It will work now.
Working plunker here
All the best.
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/>
I've got two input fields of type number. I want second to have minimum attribute dependant on first field. I can dynamically change the attribute, but ng-valid does not change, when value is lower than minimum.
jsfiddle code example: http://jsfiddle.net/NBhn4/87/
Is that a bug or am I doing something wrong?
I found this: https://github.com/angular/angular.js/issues/2404. It seems to suggest, that the problem was fixed. In my jsfiddle example I am using angular 1.3.5 and it's still not working.
<input type="number" ng-model="max" min={{min}} name='max'>
Using this, changes the minimum, but ng-valid seems not be be triggered after change.
Its your angularjs version problem I hope. Use latest versions of angularjs and this code is working.
<form name="form" novalidate ng-init="min=1;number=0">
Number:
<input type="number" ng-model="number" name="number" min="{{min}}">
<div style="color: red" ng-show="form.number.$error.min">Number must be at least {{min}}</div><br>
Minimum:
<input type="number" ng-model="min" name="min">
</form>
I'm trying to setup a "digit" field using the jQuery Validation plugin
The problem is I don't want the digit field to be required, I just want to validate it as digits only, if someone does enter anything into it.
Here is my code, if I remove the "required: true," part, the field no longer throws up an error if I enter text into it and the form gets passed.
$('.js-validate-form').validate({
rules: {
phoneNumber: {
digits: true
}
}
});
And my HTML
<input type="number" name="phone" id="phone" placeholder="Phone (include area code)" value=""/>
Thanks in advance for any help!
This only seems to be a problem with input type="number" fields. It also only works as long as your field name matches your rule declaration, in this case, phoneNumber...
<input type="text" name="phoneNumber" id="phone" placeholder="Phone (include area code)" value=""/>
DEMO: http://jsfiddle.net/L4crh/
However, there are various phone number rules you can use that are already included in this plugin as part of the additional-methods.js file
DEMO 2: http://jsfiddle.net/L4crh/1/
EDIT:
The type="number" bug has reportedly been resolved as of jQuery Validate version 1.13.
https://github.com/jzaefferer/jquery-validation/releases/tag/1.13.0