ghiscoding / angular-validation Goto Github PK

This is the error message on blur of the first field field and it is quite understandable as it reflects the error value as would have been mentioned in the locale file

But here on submit when the errors are shown they do not reflect the locale file value. Does angular-translate fail for erros on submit but works on blur?

If I do the following thing:

• enter a field using the "tab" button
• type nothing
• exit the field using the "tab" button
  there will be no validation error although the field is marked as required...

I need binding translate text with html code format like : "Required
" . Your lib still use function errorElm.text(errorMsg), this can not set html code, could you change it to errorElm.html(errorMsg).

// invalid & isDirty, display the error message... if not exist then create it, else udpate the text
if (!!attrs && !attrs.isValid && (isSubmitted || self.ctrl.$dirty || self.ctrl.$touched)) {
(errorElm.length > 0) ? errorElm.text(errorMsg) : elm.after('' + errorMsg + '');
} else {
errorElm.text(''); // element is pristine or no validation applied, error message has to be blank
}

I think, obj.commonObj.elm.unbind('blur'); in cancelValidation() is wrong.

FE, I have a angular-strap tooltip, which triggered on blur event. When i have input field with validation="max_len:50" and empty value when lost focus blur does not work and tooltip does not disappear, because blur is unbind.

How to validate a field programatically?

The validator date_euro_long does not seem to workwithout also using the required validator.

E.g the date 29.12.1986 does not validate when validation="date_euro_long:alt=sometext" but does validate when validation="required|date_euro_long:alt=sometext"

The error might apply to other date validations as well

In order to spread the word about this angular component, i suggest to register the module in ngmodules.org (One of the best sources of information in order to search Angular modules).

Currently the removeValidator() method provided in the validationService removes the validation message from the form validation summary but the error still continues to be shown next to the validated field.
On removing validator the error attached to field should also be removed.

The plunker http://plnkr.co/edit/WSjjdpVC9ck3NUw7iuKy?p=preview is not working for some time. Its referring to your git repo for validation js.
Previously you had mentioned (in #26) that you had committed the required changes for this issue but it seems its still not fixed.
With an older version (version 1.3.15) of your validation code this works but fails for your latest one 1.3.20.

When I try to put emails with dots, the validator passes when dots are in the beginning or in the end.

E.g.:
[email protected].
[email protected].
[email protected]....

I have a directive that creates inputs. Something like:

module.directive('ci', function() {
  return {
    scope: {
      model: '=ciModel',
      name: '@ciName',
      validation: '@ciValidation'
    },
    template: '<input validate="{{validate}}" name="{{name}}" ng-model="{{model}}" />'
  }
});

I use this in my form to generate inputs, like so:

<form name="userForm">
    <div ci ci-name="website" ci-validation="url|required" ci-model="user.website"></div>
</form>

This causes errors when I try to validate in my controller, like so:

var isValid = new validationService().checkFormValidity($scope.startForm);
// ERROR: checkFormValidity() requires a valid Angular Form or $scope object passed as argument to function properly (ex.: $scope.form1  OR  $scope).

If I include the inputs in my form without using the custom directive, the form validates properly.

I get why this happens... but is there a workaround for this? Or another best practice for this case?

Hello

your validator is nice. Is there any option that allow to show only last invalid message for example now i have got input with validators :'validation="email|required"' and then i have got two errors :

Must be a valid email address. Field is required.

But cen i show only last message, and after that show another.

And my other question is is there any option to valid input after leaving field ?

In order to made more easy for the user the identification of the validation errors, it would be great to show all the validations errors when the users clicks the 'Submit' button, instead of disable the submit button until the user correct all the validation errors.

Hi,

I've got the following field - the validation behaves in a strange way:

<input type="text" ng-model="company.contactPerson" validation="min_len:2|max_len:200|required" placeholder=" " required ng-focus />

Steps to reproduce:

• enter sth that causes the validation to fail
• delete the content
• validation error disappears

The filed is dirty, but the validation error disappeared, why?

Hi, I am back again, hope you aren't groaning to loud.
Using datepicker from https://angular-ui.github.io/bootstrap/, 0.13 or 0.13.2 both do it so far.
Angular v1.3.13

Plunker - http://plnkr.co/edit/ykWiwvOJbNvKYdVwXrhY?p=preview

If you select a valid date, after the validation timeout it flags it as invalid, if you leave the field causing the blur to trigger it clears the error, but does not clear it until you leave.

The problem also occurs if i just paste a valid date into that example not use the datepicker function directly. Or type a valid date in it will bring up error. If I edit the date once error is up it will clear the error once the edited date is valid again. If I leave the field [blur] with error up it will clear the error, but the error will not go away if i don't do something.

Here is the spanner in the works. If I remove datepicker from that plunker entirely pasting in a valid date does not cause the validation error to come up.
No Error Plunker without datepicker - http://plnkr.co/edit/yBZZFzTiVOmPaDwlAAYL?p=preview

I can fully understand if it may not be something you can influence, however I suspect datepicker may be in wide spread use it may come back to haunt you later :).

Hi, thanks for this fun library.

How can I add custom validators? It doesn't seem possible now.
Is it possible too to expose a validation service instead of relying only on directive ?

Hi, I must say, nice directive.
Would be nice if the angular-translate can be an optional dependency and if we can specify where are the validations messages errors.

Thanks

http://plnkr.co/edit/WSjjdpVC9ck3NUw7iuKy?p=preview

I have run into angular scope issues while trying to apply validation on forms inside ng-repeat.
Since i am creating the forms as well as the fields dynamically i am assigning the form name dynamically. Now i know that ng-repeat creates an isolated scope and i feel that, that is the reason why on calling validation on the form it is giving me error that the form object is not valid since the form exits inside the isolated scope of ng-repeat and not on the controller scope.
My problem is how do i share the scope in this situation. I have bumped into a couple of solutions but nothing seems to work. Was hoping maybe I could get some help here..

It looks like the order that the scripts are included matters. The documentation highlights the correct order:
validation-directive.js
validation-service.js
validation-common.js
validation-rules.js

But the bower.json file has a different order which for some reason prevents angular from finding the validation module. This is an issue when using a tool like grunt-wiredep which automatically inject script includes based on the bower.json files.

http://plnkr.co/edit/lvXcG4m1WsXdhG4999TK?p=preview

return

"checkFormValidity() requires a valid Angular Form or $scope/vm object passed as argument to work properly, for example"

Don't understand, where the problem?

Hello and thank you in advance for your validation system.

I have a problem using validation regex, validation is strange, sometimes it's good and sometimes not. Here is the code I use, I do a mistake?

@validation
  .setGlobalOptions({ debounce: 1500, scope: $scope })
  .addValidator('password', 'regex:password23A:=/(?=(.*[A-Z]){1,})(?=(.*[a-z]){1,})(?=(.*[0-9]){1,})(?!.*\|).{8,20}/g:regex|required')
  .addValidator('passwordConfirm', 'match:user.item.password,mot de passe|required')

Thank you.

Alex

I'm trying to reset form to it's pristine state, but cannot succeed. I looked for a working example here, but couldn't find that either. I am changing all the input values to empty text (""), and then calling myform.$setPristine(); I think that is the way to do it. But the $setPrisitine() doesn't seem to do anything.

Can anyone guide me where to check or what could be the issue?

Hi there. Thanks for providing this module and thanks in advance also for having a look at my questions. Kindly let me know if any of this is possible/doable and link to some samples if you have any.

1. How to use validationService when using 'Controller as' syntax.
2. I would like to have global configuration at Application level, rather than specify it for each Controller. Is this possible?
3. When using the Directive syntax, can I specify conditional validation.
   i.e. only apply validation when some condition is satisfied.
4. How do I remove Error message/status when some other field changes.
   e.g. In your specified sample @ http://plnkr.co/edit/jADq7H?p=preview
   say when passwords dont match, error is displayed for confirmation field.
   But when user then changes the first password field so that passwords match, then the error should be removed.
5. While I am using 'Controller as vm' syntax, using remote: for validation for a function defined on 'vm' returning a promise, I get error from angular-validation stating 'vm' is undefined. How do I get around this.

Thanks once again.

• Snehal

1. Have only two fields in the web page
2. add validation attribute to the fields
3. even if fields are marked with required in validation attribute after tabbing out of the fields, form gets validated i.e., 'Save/Submit' button gets enabled

I debugged it found that 'regex.test(value);' will return true for undefined value, it converts
undefined to a string value and then checks with regular expression

Just discovered this now.
Loaded our Sign in form, which has validation="required" for both username and password fields.

On page load, click in user name field type a value hit tab or click out of field the blue border turns red not green, as if it has an error but does not display the "Field is required." message. So it think its got an error but not the message. This occurs with 1.3.35, i just rolled back to 1.3.25 does not do it.

Appears to be a regression.
I have not created a working example yet, I hope to create a Plunker after I finish this other task.

On first form load, click in field type, form field goes green, tab out it is adding ng-invalid to classes and it goes red but no message, if i click in the form field again and then tab out again it clears it up and its fine and green. I am currently trying to reproduce in a plunker :) not having much luck yet.

I searched, but did not find an answer

I have:
textarea name="description" validation="min_len:50|max_len:2000|required"

When i type Enter (new line) validation error is fired. Why?

If input controls is required and binding ng-disable=false, then in the startup time, it shows ng-invalid (red border). Could you check for this case?

Hi,

I was trying to assign 'blur' to trigger validation, but after that, keyup can still trigger it, instead of being overridden by formerly assigned event.

I'm not sure if keyup is intended to be ignored if another event is assigned.

It seems Angular's validator listens to keyup event already when calling $parsers.unshift and $formatter.unshift. I didn't find a way to work around it without modifying Angular's source.

Any ideas?

In the demo, if I focus on the first input and then left them empty (with skip to the next one) the validation not fires, it is possible to show error message on blur?

When multiple errors exist on a field they are shown in a single line. This defeats the purpose of actually showing the errors when they are all mixed up.
If i want to show the errors separately as a bullet-ed list like:
• Must be a valid email address
• Field is required
• Must be at least 6 characters long

i could make a template and iterate over the set of errors for that field and show them separately. However, to actually do that i would requires the set of errors for a particular field on the view itself. is this possible?

Hello,

       First of all thanks for this very good library. 
       If I apply this validation in format : <input type="text" id="val" validation="required" /><span class="validation"></span> its working.

$scope.validationField = "required"//in controller
But if I apply this in the format:
where directive creates input element as myApp.directive("myDir", function(){
return{
restrict: "AE",
scope: {
ngModel:"=",
validations:"="
},
template:''
}
});

Not working

I have also created a plunkr:

http://plnkr.co/edit/weXNcOjdNJgM5wyKPyIb?p=preview

Cal u please sugegst me the the way I can use this lib with directrives.

Pushpendra

If we can reuse our Laravel Validation Rules, Messages via json response, so we can validate both server side & client side!
laravel's message face to the rules, angular-validation's messages seems to the input name.
when I us between:4,8 , angular-validation cann't validate , as I set min_len:4 , laravel cann't validate, why not use same rules or more rules compatible with laravel, reuse laravel's messages is expect !
good job ! :)

I have multiple forms in my app. If there exist some validation errors in one form and without rectifying them if I try to work on another form then I found that both forms share the errors even though we are validating a different form.

http://plnkr.co/edit/mb6kkuMK90PdMn1y4l0w

I have created to explain this issue wherein you can see that form1.$validationSummary gives the errors in form2 also.

I use validation with validation-directive like this

input ... validation="required" validation-error-to="#displayError">

When I try to use

new validationService().checkFormValidity($scope.form) 

I do not get any error messages.
Removing validation-to-error works. But that does not help me. :)

I figured that it is because validation-common.updateErrorMsg is not instantiated with the correct values for self (specifically self.validatorAttrs) since I define it using validation-directive, but checkFormValidity is in validation-service, of which I have just instantiated a new empty instance.

I have made a hack in checkFormValidity lines 110-113 by changing the following:

if(!!elm && elm.length > 0) {
   ctrl.$setTouched(); // make the element as it was touched for CSS
   self.commonObj.updateErrorMsg(form.$validationSummary[i].message, {valid: false, elm: elm, submitted: true});
}

to

if(!!elm && elm.length > 0) {
   ctrl.$setTouched(); // make the element as it was touched for CSS
   elm.blur()
}

This I assume is not a good idea, but it will fire the original validators that were registered on the controls...
I am at a loss how to get it to work, or if it is even supposed to work like I want it to :)

tlastad

Integer is the only (that i've noticed) validation that defaults to invalid on load while the rest are considered valid even when I have required. Whats the easiest way to make isFieldValid return false when its pristine.

edit: i commented out the if(typeof value !== undefined") statement in the validator function and added if (strValue == undefined) {isFieldValid = false;} in the bottom of the validate function. Don't know if I broke anything yet.

i've read this https://github.com/ghiscoding/angular-validation/wiki/Isolated-Scope and don't understand , how to using angular-validation with ng-include.

Say, we have index.html

<form novalidate name="nameForm">
<input name="field1" validation="required">
<div ng-include="template.html">
</form>

template.html:

<input name="field2" validation="required">

field1 validate is ok, but how to validate field2?

Hi,
is there anyway to validate based on scope or vm value?

i want to validate this http://isteven.github.io/angular-multi-select/

Email address format has its own standards RFC 5321 and RFC 5322, and extensions like RFC 6531.

Under these rules, email nickname@zone is correct.

Angular input type="email" validates in accordance with these rules.

But here I just turned on the regime boring)))

more serious problem is that the not allowed Cyrillic characters!

This email - кокер@спаниель.рф it is also valid!

Please correct this unfortunate mistake

Firstly so far loving the library.
What I have setup here.

My controller is aliased "MyController as vm" in web page context.

<form name="vm.myform" ng-submit="vm.submit()">
     <etc>
</form>

In my controller, I have an alias to be vm = this; where this is the controller.

app.controller('MyController', ['validationService', function (validationService) {
  var vm = this;
  vm.submit = function () {
   // this does work
   new validationService().checkFormValidity($scope); 

   // this does work not work I believe it should
   new validationService().checkFormValidity(vm.myform);
  }
}]);

The error I get for the "vm.myform" naming is as follows.

"checkFormValidity() requires a valid Angular Form or $scope object passed as argument to work properly (ex.: $scope.form1  OR  $scope)."

I have used the controller as naming sytnax to access forms in a few other scenarios and never encountered a problem before now.

Not sure this is something you can do anything about but thought i would mention it.
I find the controller as syntax far superior to $scope.

I am currently using angular v1.3.13 and angular-validation 1.3.35.

Cheers,
Rob

Hello, thanks for this interesting library.
How can validate a field on form submit if the user has not touched the field before?

I have an application where form submissions aren't done explicit by the user, but done "under the hood" while user switch between forms. In this way, user could leave a view with an invalid form data: the data will not be posted, but it's kept alive on the $rootScope.

The problem is when user go back to the invalid form: validation errors are not displayed unless the field is "touched".

I solve the problem by implementing a directive that watch the form $validationSummary attribute, and call checkFormValidity when $validationSummary is filled. See below

app.directive('validateOnload', ['validationService', function (validationService) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var validator = new validationService()

            var deregisterCheckForm = scope.$watch('form.$validationSummary', function () {
                if (scope.form.$validationSummary) {
                    validator.checkFormValidity(scope.form)
                    deregisterCheckForm()
                }
            })
        }
    }
}])

I wonder if this behaviour shouldn't be added to the library as an option. What do you think?

The validator() method registers new key event listener on every calls.
After typing several characters, each keyup causes hundreds of validate() calls and degrades the performance.

how to implement remote validation?

I couldn't find anything about defining a global value for debounce in the docs. Is there a way to change it without messing with the source code?

Add Spanish (es-ES) translations to angular-validation.
Add Portuguese (pt-BR) translations to angular-validation.

Hi. It would be great if there was an event listener in the service for changes on the validation summary.

E.g:

validationService.onValidationSetChanged(function(validationSummary){
  ..........
});

It'd be great to add translate prefix options. It helps to group translations.
It could be add here (I do not know is it proper place to did it):
validationCommon.js:

        _globalOptions = {
          translatePrefix: null,

...

        var msgToTranslate = _globalOptions.translatePrefix ? (_globalOptions.translatePrefix + validator.message) : validator.message;

I have a hiccup at work, and have been trying to reproduce it.
Interaction of routes with validation, I think it might be tied up with $destroy of scopes, but not sure.

This example is not the same behaviour I have at work but this is related.
It is similar as it is the same error message 1. below.
There is a chance I have just mucked my code and so its my bug not one in angular-validation, but I think I have squashed most of the dumb out of the example now.

http://plnkr.co/edit/c94r1xA8e0M3iXnWCe6w?p=preview

Load the demo, then click in FIeld1 and click out no error.
Load the demo, then click in Field1 and type a letter no error.
Now click on "First" next to "Choose Route" this activates the route.

Now two errors occur.

1. Go to field 1 and type a letter get an error in javascript console.
   "TypeError: Cannot set property '$validationSummary' of undefined"
2. The following error appears if you click in Field1 and the click out of it to blur.
   "Uncaught TypeError: Cannot read property 'isValidationCancelled' of null"

Sometimes I can get error case 1. without typing anything into field one, but its hit and miss and not frequently.

If line 37 is commented out - "var v = new validationService()", then error 1 does not happen, but 2. still does.

Cheers, Rob.

I've tried to use addValidator() and removeValidator() and have it working but its pretty awful IMO.
Going in I had almost expected that validation rules on a field would be disabled if ng-required was false. But then maybe that was an unreasonable expectation.

Maybe I am just missing something obvious.

We have quiet a few forms were some fields appear and are required to have a value if a checkbox is selected.

Thanks for reading,
Rob.

Thank for this. It looks exactly what I was looking for. Right now when I have a validation error the error message doesn't get display. I checked that my en.json file is properly loaded by the browser.

Any idea?