I have added a custom validator to parsley which is working as expected but the only problem I have is that the data-parsley-error-message is being used over the data-parsley-required-message when the field has been left empty.
How can this be prevented so that the error message is used when validation fails and the required message is shown when the field is blank.
Current Code:
<input class="form-control" id="FirstName" name="FirstName" maxlength="20" data-parsley-required-message="Your first name was missing." data-parsley-validate-non-ascii="" data-parsley-error-message="Invalid Character Entered" data-parsley-trigger="blur" required="" data-parsley-id="3137" type="text">
window.ParsleyValidator.addValidator('validateNonAscii', function (value) {
return Validate(value);
});
data-parsley-error-message will always have priority. Use data-parsley-validate-non-ascii-message instead.
Using the suggestion from Marc-André Lafortune, I managed to find my own answer by implementing a custom Validation Error Message:
I updated my HTML input to the following:
<input type="text" class="form-control" id="FirstName" name="FirstName" maxlength="20" data-parsley-required-message="Your first name was missing." data-parsley-validate-non-ascii="" data-parsley-validate-non-ascii-message="Invalid Character Entered" data-parsley-trigger="blur" required="" data-parsley-id="5021">
Then using an event listener, I was able to add the error message from the input to Parsley; which now shows the validation error when a invalid character is entered and the required message when the field is blank.
$.listen('parsley:field:error', function (fieldInstance) {
var validateNonAsciiMessage = fieldInstance.$element.data('parsley-validate-non-ascii-message');
if (validateNonAsciiMessage !== undefined) {
window.ParsleyValidator.addMessage('en', 'validateNonAscii', validateNonAsciiMessage);
}
});
window.ParsleyValidator.addValidator('validateNonAscii', function (value) {
return Validate(value);
});
Related
I have an update function and a number of input boxes. Each input has an ng-blur attached to it so that the update function is called whenever the cursor leaves the box.
$scope.update = function(data) {
console.log(data); //outputs value in the textbox
//how can I output/access the key?
}
The input for name look like this:
<input type="text" ng-model="user.name" ng-blur="update(user.name)"/>
As I need to be able to post a JSON object in the form {"name" : "bob smith"} what's a good way of generating the "key" of the object bearing in mind that it will differ depending on the input box that's being used at the time?
EDIT ↓
I have made this jsfiddle to illustrate a way to do it more cleanly & that would scale more easily: http://jsfiddle.net/kuzyn/k5bh0fq4/5/
EDIT ↑
Why not simply pass a second string argument? It's not a fancy way to do it but it would work:
<input type="text" ng-model="user.name" ng-blur="update(user.name, 'name')"/>
And
$scope.update = function(data, key) {
console.log(key, data);
}
It might be a little more work but it is much more scalable. You could make use of the ng-form and naming your form inputs. By naming your form and inputs, you are creating a form reference on your scope via $scope[form-name]. Each named input within that form then sets an input reference via $scope[form-name][input-name].
I'm coding this in coffeescript (to preserve my sanity, sorry)
form
<form name="myForm">
<input name="name" ng-model="user.name" ng-blur="update(user)"/>
<input name="email" ng-model="user.email" ng-blur="update(user)"/>
<input name="other" ng-model="user.other" ng-blur="update(user)"/>
</form>
update & save func
# key is what changed in case you need to do something special on the put call to server
$scope.save = (data, key)->
# pseudo-code
$scope.update = (data)->
for name, input of $scope.myForm
if input?.$dirty
$scope.save data, name
break
docs - https://docs.angularjs.org/guide/forms
codepen - http://codepen.io/jusopi/pen/LGpVGM?editors=101
I need validation for ng-list, means should restrict the user to enter more than three array list like ['121','565','435'] and if user tries to enter like ['121','565','435','787'] should give error like only 3 vin can enter.
Also if the user enter ['**1214**','565','435'] like above it should tell only 3 digits are allowed.
This is my input field:
<input type="text" name="vin" id="vin" class="form-control"
ng-model="vm.user.vin" ng-list required max-length="3"/>
I am new in AngularJS.
I don't know the default validate properties for ng-list, but you can customise the validation like
<input type="text" name="vin" id="vin" class="form-control"
ng-model="vm.user.vin" ng-list required max="3" ng-change="isBigEnough(vm.user.vin)" />
<span ng-show="vm.user.vin.length > 3">array length should below than three</span>
<span ng-show="IsElementLength">element length should below than three</span>
and your controller side code
$scope.isBigEnough = function (values) {
if (values != undefined) {
values.every(function (element, index, array) {
if (element.length > 3) {
$scope.IsElementLength = true;
return false;
}
$scope.IsElementLength = false;
return true;
})
}
}
Result
['121','565','435'] - No error message
['1211','565','435'] -element length should below than three
['121','565','435','543']- array length should below than three
['1211','565','435','543']- array length should below than three and element length should below than three
i have bring the code on plunker, but i did't test it on plunker.
I'm trying to figure out how to make parsleyjs only trigger validation on blur for a field that has already failed validation.
See http://jsfiddle.net/billyroebuck/zbmv2d3w/
Markup:
<form id="myform">
<label for="email">Email</label>
<input type="email" name="email"
data-parsley-required="true"
data-parsley-type="email"
data-parsley-custom
data-parsley-trigger="blur"
/>
<input type="submit" />
</form>
JavaScript:
window.Parsley.addValidator('custom',
function (value, requirement) {
console.log('custom validation triggered');
sleepFor(3000); // simulate a delay (testing only)
if (value == 'test#test.com') {
console.log('custom validation failed');
return false;
}
console.log('custom validation passed');
return true;
}, 32)
.addMessage('en', 'custom', 'custom validation failed');
$('#myform').parsley();
function sleepFor(sleepDuration) {
console.log('pretend this takes a while...');
var now = new Date().getTime();
while (new Date().getTime() < now + sleepDuration) { /* do nothing */
}
}
parsleyjs Version 2.2.0-rc1
The email field has validation rules to check:
a value is provided,
the value entered is a valid email address,
some custom rule (pretend this is an AJAX request)
I have the parsley-trigger attribute for this field set to blur.
Steps:
Open the console
Enter "a#b.com" in the email field above and press tab
Note the custom validation is triggered (good)
Enter "xyz" in the email field and press tab
Note the parsley type validation kicks in (good)
Enter "xyz#test.com" in the email field View the console
Note the custom validation is triggered the moment the input becomes a
valid email (in this case when you press the letter c in .com) vs
blur :(
How can I make sure the validation is only triggered on the blur event for invalid fields?
Thanks in advance!
I'm afraid there is no such option currently. The idea is to remove the error message as soon as possible and everyone appears to like this.
Given this:
<input id="modalContentTitle"
name="modalContentTitle"
ng-minlength="5"
ng-model="ahs.modal.data.title"
ng-required="true" />
I know that I can access information on that field like this:
title="{{ ahs.vr5(ahs.forms.modal.modalContentTitle) }}"></i>
vr5 = function (field) {
if (angular.isDefined(field)) {
if (field.$error.required) return "Required";
if (field.$error.minlength) return "Minimum 5 characters";
if (field.$error.email) return "Email Invalid";
}
return "OK";
}
Is there a way that I can get the ng-minlength directly from the field information with AngularJS or do I need to create a different vr6 function if I want to verify lengths for fields with a minlength of 6.
unfortunately minlength is a private variable within Angular. You can however, do a workaround for this
<input id="modalContentTitle"
name="modalContentTitle"
ng-minlength="modalContentTitle.minlength = 5"
ng-model="ahs.modal.data.title"
ng-required="true" />
And now you can access this by
field.minlength
Is it possible to show a Validation Summary, a Div on top of the page with all the Validation error messages in angularjs , on form submit ?
I am coming from a .Net background and used to have a validation summary concept,all the examples i have seen in angular shows the error message right next to the control.
I am very new to angularjs , so an example or pointer to the right direction would be appreciated !
Thanks !
Yeah, you can use flags on each of your input fields, which will show a specific error message based on whether that flag is true or false.
For example:
<div ng-controller="signupCtrl">
<input type="text" id="username">
<input type="text" id="password">
<button ng-click="validate()">Sign-up</button>
</div>
Then, the validate function would run several other functions that would set flags. For example:
function signupCtrl($scope) {
$scope.validate = function() {
if( /* username is bad */ ) {
$scope.usernameError = true;
} else if ( /* password is bad */ ) {
$scope.passwordError = true;
} else {
// AJAX call to submit sign-up, or whatever
}
}
}
Your error messages would look like this:
<div class="error" ng-show="usernameError">Your username is bad</div>
<div class="error" ng-show="passwordError">Your password is bad</div>
Or, better yet, you can use a model, and only one error message:
<div class="error" ng-show="error">You {{field}} is bad</div>
But that second option would require some different tweaking of your code.