I have a username input and I have a custom error message "Username already taken" via ng-messages. I managed to manually add and show the error message but the problem is the "error-class"(or something that turns the angular-material input into color red on error) is some kind of "delayed". I set the error then the error message shows but there is no error-class applied. I changed the username value(this will set the error to false based on my custom function) then the error message disappears but the error-class is applied just this time.
To show you what my problem is, heres a plunkr
--EDIT--
Someone gave me and idea, and I just have to manually set the error-class on input, but in angular-material's own way. Just put md-is-error on md-input-container and also to manually set input's validity in controller
<md-input-container md-is-error="sampleForm.userName.$invalid">
Heres an updated plunkr
Its working, See the plunker
Plunker
Use ng-class to dynamically add 'errorClass' to the input box
ng-class="{'errorClass': sampleForm.userName.$error.alreadyTaken}"
I have added .errorClass when the $error gets true.
write 'alexpogi' in username field which makes the content red
Related
I am setting input field to invalid from javascript like this:
$scope.formName.fieldName.$setValidity("string", false);
This is working, but it affects the view only after clicking in a input field and then clicking out of it.
How can I change it in order to see the invalid field immediatelly?
You'll need to attach an ng-change="checker(model)" to your input field. Then just apply an ng-class to it to check for formName.fieldName.$error.string (since you put string as the error key) or you can also do formName.fieldName.$invalid && !formName.fieldName.$pristine
I've attached this codepen for you to play around with and see how to apply an invalid class on the field without having to lose focus on it.
Hope that helps!
I need to validate a single selection row on a datatables. I don't know which is the best way it can be done. Right now I've put a hidden type input that is filled by javascript when the users clicks a row on datatables. When I validate form, parsley doesn't submit it if required hidden input is blank, but no error message is shown.
I've also tried to get field:error event, but it is not fired on hidden field.
window.Parsley.on('field:error', function() {
// This global callback will be called for any field that fails validation.
console.log('Validation failed for: ', this.$element);
});
Is there any way I can show with parsley a validation error message if hidden field is blank on form submit? I know I can do it without parsley, just checking if field is blank on submit, but as the other form fields are being validated through parsley I would like to know a way to show parsley error message somewhere in the form by parsley.
Assuming you have removed the "type=hidden" part of the excluded option, it should work fine.
Tip: You should trigger an 'input' event on your hidden field whenever you modify it.
Post a working example if it still doesn't work.
I know I can call $setValidity('errorkey', true) to clear a specific validation error from a field. However is there a way to clear all the validation errors from a single field?
I tried $setValidity(true) but that obvious didn't work. I guess I could loop through $error for the field and then call $setValidity. Is there an easier way?
Please use following line to remove all validations error
formName is the form name ..
$scope.formName.$setUntouched();-- set form to untouched
$scope.formName.$setPristine();--remove all validation error
If I don't want text to displayed if a required field is not entered. How would I do this? I wasn't able to find documentation on this.
I don't want the 'This value is required.' or custom message within data-required-message to be displayed.
I am fine with the field being highlighted if it is entered incorrectly. Is this possible?
According to Parsley Documentation in their version 2, they already supported this features, just add "data-parsley-errors-messages-disabled" attribute to the <form> tag.
Add data-parsley-errors-messages-disabled to the field
from documentation:
Add parsley-success and parsley-error classes on field, but no error message.
In the input set data-parsley-required="false"
You want to check validity of the field, but show no message. The way to customize the error message shown is using "data-parsley-error-message" , so the "hack" is to provide an empty custom message:
In the input set this data-parsley-error-message=""
I have a problem with knockout-parsley that I can not find a solution to.
Basically I am using Parsley http://parsleyjs.org/ and Knockout-Parsley https://github.com/gdandar/Knockout-Parsley along with knockout for validation.
This seems to be working fine for most controls, but I am getting an exception from within Knockout about a binding to the checked property when the control is a radio button or checkbox.
The exception is :
SCRIPT5007: Object expected
knockout-3.0.0.debug.js, line 2609 character 21
I have a fiddle that shows the issue although the actual exception is not displayed in the fiddle ( but you can see the issue.
http://jsfiddle.net/iisfaq/N3dZr/7/
Now in the fiddle if you run it you will see that there are 3 check boxes and a text field. The text field should display the value from the observable array. And the middle checkbox should be checked.
But in the fiddle you will not see any checkbox's because of the exception.
If you comment out the line below in the fiddle it will work but not provide any validation at all.
ko.parsley.init('#main-form');
Trying to debug the exception I found that the exception occurs during the applyBindings method - ko.applyBindings(theModel);
The error message is: "Unable to process binding \"checked: function(){return abc }\"\nMessage: Object expected"
This occurs in the catch at 2609 in knockout-3.0.0.debug.js file
Anyone have any ideas?