I can see that Parsley.js handle English separators for numbers.
When I use Parsley with Spanish numbers it doesn't work (example : 5,50 is not a valid number for Parsley and in my country comma is our decimal separator).
Is there some config to change it?
You need to create the necessary regex that matches your needs. A (probably rudimentary) regex would be ^\d+(,\d+)?$, that matches any digits or digits with commas.
You don't even need to create a custom validator, since Parsley allows you to use data-parsley-pattern which receives a regex.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.7/parsley.min.js"></script>
<form data-parsley-validate>
<input type="text" name="commaNumbers" data-parsley-pattern="^\d+(,\d+)?$" />
<input type="submit" />
</form>
I know it's late but this solution helps me too. I'd just modified/changed the pattern from Luis Cruz code so that the field will handle decimal places. (ex. 1,000,000,000.30)
Hope this helps too.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.0.7/parsley.min.js"></script>
<form data-parsley-validate>
<input type="text" name="commaNumbers" data-parsley-pattern="^-?(?:\d+|\d{1,3}(?:[\s\.,]\d{3})+)(?:[\.,]\d+)?$" required/>
<input type="submit" />
</form>
Related
I still have doubt in using ng-mask, I went through most of the web pages for it to work but it still remains the same. And many people told to use it with input tag of angularjs, after doing so Im not able to mask the input.Or am I making mistake please somebody correct me and give the clarity of using the ng-mask.
<input type="tel" name="phoneno" maxlength=13 ng-model="phone.number" ng-mask="(999)999-9999"/>
</div>
<button class="button2" ng-click="home()">Back</button>      
<button class="button3" ng-click="addphone()">Add</button>
Download the ngMask.min.js from net
Call the ngMask.min.js before app.js and Include app.js module
var yourApp= angular.module("yourApp", [
'ngMask'
]);
HTML :
<input type="tel" name="phoneno" maxlength=13 ng-model="phone.number" mask="(999)999-9999" />
Below code is working for me.
I think you should use data-on attribute like below
<input type="text" class="form-control input-small" data-ng-model="zipcode" placeholder="Enter the zip code" data-ng-mask="#####-###" data-on="keyup">
// 2. Add ngMask module dependency to your app.
angular.module('yourApp', ['ngMask']);
<!-- 1. Add ngMask plugin after your AngularJS. -->
<script src="angular.min.js"></script>
<script src='ngMask.min.js'></script>
<!-- 3. Use the avaiable patterns to create your mask. Set the mask attribute. -->
<input type='text' ng-model='maskModel' mask='39/19/9999' />
<!-- 4. Adjust your mask options. -->
<input type='text' ng-model='maskModel' ng-value='0/3/9' mask='3/9?' mask-repeat='2' mask-restrict='accept' mask-clean='true' mask-validate='false' mask-limit='false' />
source: https://github.com/candreoliveira/ngMask/blob/master/README.md
Use ui-mask instead:
<div class="form-group">
<label for="birth-date">Date of birth</label>
<input type="text"
class="form-control"
id="birth-date"
ng-model="formData.date_of_birth"
ng-value="formData.date_of_birth"
ui-mask="99.99.9999"
ui-mask-placeholder
ui-mask-placeholder-char="_"
>
</div>
https://github.com/angular-ui/ui-mask
Why is AngularJS not checking the step="0.01" attribute of the second input? For min and max attributes it works perfectly, but not for the step attribute.
For example: The input 0,005 will evaluate submitNewEntryForm.submitNewEntryAmount.$valid to true, but it shouldn't.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div ng-app="">
<form class="form-inline" name="submitNewEntryForm">
<div class="form-group" ng-class="submitNewEntryForm.submitNewEntrySubject.$valid ? 'has-success' : 'has-error'">
<label for="subject">Betreff:</label>
<input type="text" class="form-control" id="subject" required name="submitNewEntrySubject" ng-model="submitNewEntrySubject">
</div>
<div class="form-group" ng-class="submitNewEntryForm.submitNewEntryAmount.$valid ? 'has-success' : 'has-error'">
<label for="amount">Betrag:</label>
<input type="number" class="form-control" id="amount" required name="submitNewEntryAmount" ng-model="submitNewEntryAmount" step="0.01" min="0" max="99999">
</div>
<button type="submit" class="btn btn-primary" ng-disabled="!(submitNewEntryForm.submitNewEntrySubject.$valid && submitNewEntryForm.submitNewEntryAmount.$valid)" ng-click="">Submit</button>
</form>
</div>
Add regex, like \d+\.\d{0,2}
You can use HTML5 pattern="^\d+\.\d{0,2}$" or ng-pattern="^\d+\.\d{0,2}$". It changes error state without limiting html input to 2 decimal points.
To be strict, you should use ^\d{1,5}\.\d{,2}$
If you want number to have 2 decimal point but allow it to be without leading 0 like .01, you can use ^\d*\.\d{2}$
I didn't realize that there was a Angular directive for the step attribute. If you look at the documentation, it seems to be a very recent addition.
I find no mention of the step attribute until you get to a build of the un-released 1.5.9 version.
Latest version: https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D
Notice in the "Usage" and "Arguments" sections that the step directive is listed. Now use the pull down menu in the upper left to change the version, and observe that there is no mention of the step directive.
Either this is a brand new, unreleased feature... or perhaps the documentation for older versions is not correct :)
Angular js does provide a validation for several html5 introduced attributes of an input, like min or requiredincluding the .
<input type="number" name="input1" id="input1" min="0"
ng-model="$ctrl.input1"ng-required />
<div ng-messages="formname.input1.$error" class="em-messages">
<div ng-message="required">This value is required</div>
<div ng-message="min">You must not use negative values</div>
</div>
For the step attribute such a validation is working, but no error message can be displayed the material way by default, so what's the easiest way to implement it (for example for step="0.001"?
<input type="number" name="input1" id="input1" min="0" step="0.001"
ng-model="$ctrl.input1"ng-required />
<div ng-messages="formname.input1.$error" class="em-messages">
<div ng-message="required">This value is required</div>
<div ng-message="min">You must not use negative values</div>
<div ng-message="step">You can work with 0.001 steps</div>
</div>
Simple, just use a regex like this:
<input type="number" name="input1" id="input1" min="0" step="any"
ng-model="$ctrl.input1"ng-required
ng-pattern="/^[0-9]\d*((.|,)\d{1,3})?$/" />
<div ng-messages="formname.input1.$error" class="em-messages">
<div ng-message="required">This value is required</div>
<div ng-message="min">You must not use negative values</div>
<div ng-message="pattern">You can work with 0.001 steps</div>
</div>
To eplain the regex quickly:
[1-9]\d* means that there can be any natural numbers
((.|,)\d{1,3})? now a . or a , can follow to seperate the fraction
\d{1,3} defines that there have to be one to three numbers have to follow
Now your pattern will show an error message in angular material style.
Depending on how your step should actually look like, you will have to modify either the \d{1,3}, to reflect the amount past commata numbers and maybe wrap into a modulo, so if you want todo something link step="0.005".
Take a look at this jsbin
I have one field that is properly checking the range of the user's input. This is a number field.
I have another field that is changing the input into a currency format. This is a text field.
My issue is that I cannot do both of these ideas on one field. One field needs it to be text while the other requires it to be a number.
Is there something out there that can accomplish the marriage of both fields?
Instead of creating your own directive look into ng-currency: http://ngmodules.org/modules/ng-currency
<input type="text" model="yourModel" ng-currency min="1" max="1337" />
angular.module('myApp', ['ng-currency'])
.controller('CurrencyController', function($scope) {
$scope.myData = 8;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/aguirrel/ng-currency/master/src/ng-currency.js"></script>
<!-- PLEASE CHANGE AS YOU WISH THIS LOCALE JS -->
<script src="https://code.angularjs.org/1.4.3/i18n/angular-locale_es-us.js"></script>
<div ng-app="myApp" ng-controller="CurrencyController">
<input type="text" ng-model="myData" ng-currency min="1" max="10" currency-symbol="$" /><br/>
{{ myData }}
</div>
I am trying to submit the form on only successful validation.
validation is working for required but not working for ng-minlength
form input is invalid but form is still being submitted.
<form name="myForm" ng-submit="count = count + 1" ng-init="count=0" ng-app>
<div class="control-group" ng-class="{error: myForm.mobile.$invalid}">
<label class="control-label" for="mobile">Mobile</label>
<div class="controls">
<input type="text" name="mobile" placeholder="07XXXXXXXXX" ng-model="mobile" ng-minlength="11" required />
<span ng-show="myForm.mobile.$error.required" class="help-inline">Required</span>
<span ng-show="myForm.mobile.$error.minlength" class="help-inline">Mobile number should be minimum 11 character starting from 07</span>
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="btn" type="submit" value ="submit" />
</div>
count: {{count}}<br />
<tt>myForm.$invalid = {{myForm.$invalid}}</tt><br/>
</div>
</form>
http://jsfiddle.net/pMMke/9/
what am I doing wrong.
I don't want to use submit button disable method.
This is what you are doing wrong: you are mixing two concepts, Angular validators and
HTML5 validators.
The required HTML5 validators, for instance, states that:
When present, it specifies that an input field must be filled out before submitting the form.
So, if you try to submit a form that has an input with this attribute, it will show a message explaining this to the user, and it will prevent the form from being sent. This is the behavior you want. Why isn't working for ng-minlength? Because ng-minlength is an Angular validator (you can tell because it begins with ng-), and it doesn't add any special behavior to the form. It simply set the input where it is located to invalid (and hence, the form), and let you decide what to do with it.
You have an option: you can use the pattern HTML5 validator, to specify the field requires at least 11 characters. It would like this:
<input type="text" pattern=".{11,}">
So when you submit a form containing this input, it will no be sent if the user has enter less than 11 characters.
But since we are it, and you are already using the pattern validator, you could use the regular expression in its full potential, and define something like:
<input type="text" pattern="07[0-9]{9}" />
Which will only admit values of 11 characters, that start by "07" and that contains only digits. I have modified your fiddle to show you how it would work: http://jsfiddle.net/helara/w35SQ/
I mistakenly used ngMaxlength="12" ngMinlength="6" instead of ng-minlength="6" ng-maxlength="12", it's working fine now.
Both ng-minlength & mg-maxlength works in AngularJS.
I've tested this in AngularJS version 1.3.
Make sure to use novalidate with <form> to disable browser's native validation.
This should work:
To enter mobile number
ng-show="myForm.mobile.$touched && myForm.mobile.$error.required"
For minimum length
ng-show="myForm.mobile.$touched && myForm.mobile.$error.minlength"
For maximum length
ng-show="myForm.mobile.$touched && myForm.mobile.$error.maxlength"
This work for me guys
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input ng-minlength="11" class="mdl-textfield__input" type="text" name="cpf" id="cpf" ng-model="avaliacao.cpf" ng-required="true" ng-pattern="/^\d+$/">
<label class="mdl-textfield__label" for="cpf">CPF *</label>
</div>
<p style="color: #d50000;" ng-show="myForm.cpf.$error.required && myForm.cpf.$dirty">Field Required</p>
<p style="color: #d50000;" ng-show="myForm.cpf.$error.pattern">Only numbers</p>
<p style="color: #d50000;" ng-show="myForm.cpf.$error.minlength">Min 11 Chars</p>
I'm facing the same issue, and I think you can only disable the button or ignore the entered value by yourself. You can also check the $valid property in your controller and ignore the value... It is not so nice, but I found no other way.