how to only allow text in parsely.js validation - javascript

I am using the nifty parsley js As you can see in the documentation
there is only data-parsley-type="alphanum" which allows numbers and letters. I am trying to create fields that ONLY allow letters.
Anyone know how to do this?

You could use a pattern:
data-parsley-pattern="^[a-zA-Z]+$"

You can use such input validator, in order to obtain an only letter field.
<input type="text" class="form-control" required data-parsley-pattern="^[a-zA-Z ]+$" placeholder="Type something" />

Related

How to use input mask plugin with alias

Hi I'm using the plugin RobinHerbots/Inputmask and I've followed the following guidance https://github.com/RobinHerbots/Inputmask/wiki/Howto:-Effectively-using-the-data-inputmask-attribute
So my javascript code looks like
$('[data-inputmask]').inputmask();
Inputmask.extendAliases({
'euro': {
mask: "999-999-999"
}
});
and this is my html
<input type="text" data-inputmask="'alias': 'euro'" />
The problem is when I move over the input field i get the word euro instead of the input mask, do you know why?
You can always do it the easy way and class mask as a parameter.
$('.inputmask').inputmask({"mask": "999-999-999"});
<input type="text" class="inputmask" />

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

Verify.js - Validation using regular expressions

I'm using the Verify.js library (http://verifyjs.com/). It seems to be exactly what I need to do client side validation.
However, I'm having trouble getting it to work with my regular expressions I'm writing. It seems whenever I try a lookahead, the form is always allowed to be submitted and the regular expression is not evaluated (maybe it's not compiling)?
I believe my regular expression is correct. I'm trying to verify the user input an integer or a decimal.
<form>Type abc
<input required type="text" data-validate="regex(^abc$)" />Type integer/decimal
<input required type="text" data-validate="regex(^[0-9]+([\,\.][0-9]+)?$)" />
<input type="submit" />
Here's a fiddle:
https://jsfiddle.net/ms4pg776/1/
I fixed this by adding a rule to the $.verify variable.
$.verify.addRules({
isIntegerOrDouble: {
regex: /^[0-9]+([\\.][0-9]+)?$/,
message: "Please enter an integer or a decimal number."
}
});
Then in the HTML:
<input required data-validate="isIntegerOrDouble" type="text"/>
Hope it helps someone!

How to use only email validation by pattern in AngularJS 1.2?

In other words I want to disable angular email validation and use only ng-pattern validation. How I can do it?
Plunker example (me&#example.com need to be valid email address)
replace the type from email to text,
<input type="email" .....>
by
<input type="text" .....>
Set email to text and regex to this.
<input type="text" name="input" ng-model="text" ng-pattern='/^[a-z]+[a-z0-9._]+#[a-z]+\.[a-z.]{2,5}$/' required>
In my case I decide to use default AngularJS email validation till update to 1.3 version or higher. In higher version I haven't this bug.

ParsleyJS required and data-parsley-required

I have to use required='' on some fields, and then I use data-parsley-required on others. The parsleyJS is applying to the input fields that have required='' on them. Is there a way I can make the ParsleyJS only work on the fields that have the data-parsley-required on it?
Example:
I have the following fields
<input type="text" id="field1" data-parsley-required="true">
<input type="text" id="field2" required="">
Currently it parsley will try to validate both fields. How do i make it only validate if the field has data-parsley-required="true" on it?
Parsley will turn off HTML5 validations, so it's not clear that this is what you actually want...
If you're sure that's what you want, you could exclude [required] fields:
<form data-parsley-excluded="[type=submit], [type=button], [type=reset], [type=hidden], [required]">
Note that if you have other validations on these required fields, this will turn off those validations as well...
Otherwise, you'll have to tweak the source code directly.

Categories