jonsamwell / angular-auto-validate Goto Github PK

Working around it right now by overriding the styles and hiding the classes.

Particularly it would be great to allow the user to pass a variable (in addition to no variable being allowed) to disable/enable validation dynamically. This would allow users to enable/disable validation error message rendering for subforms when they enable/disable the subforms. :)

Hey Jon, it's me again. :P
I made a tiny directive to reset a form :

function reset () {
    return {
      scope: {
        form: '=reset'
      },
      link: function (scope, element) {
        var initialForm = angular.copy(scope.form);
        element.on('click', function () {
          scope.form = angular.copy(initialForm);
          scope.$apply();
        });
      }
    };

You can use it just like that :

<button type="button" reset="vm.form">Cancel</button>

Where vm.form is an object containing all my ng-model in the form. It's working great but when all the inputs are reinitialized, the auto-validate library triggers and put some inputs with an error state. Is it possible to neutralize this behaviour or integrate this reset feature inside the lib ?

EDIT : I didn't mention it but it requires to clean the styling of the good/bad inputs as well.

Looking at these lines of code:

setValidationState = debounce.debounce(function () {
     validationManager.validateElement(ngModelCtrl, element);
}, 100);

validateElement normally takes a 3rd parameter to force validation when the particular element is included via register-custom-form-control. But since validateElement is being called from this decorator without a check on the particular element to "force", the element validation doesn't get updated correctly. Specifically, I am using the ui-select angular component and have added register-custom-form-control to it. It seems to be working except in this case. The only time I can get the validation style correct is by pressing my submit button again which causes it to go through the normal validationForm path instead of validateElement.

Any thoughts on how to work around this or to alter the code to fix this?

I just ran across an issue - and I'm not sure if it's an angular issue or angular-auto-validate. I have an <input type="number" required /> and I seem to always be getting the required error validation message even i've typed something (non-numeric) into the input. I am expecting the error message to be the number error message, not the required message.

The angular demo on https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D seems to work as expected with required and number.

Thoughts?

I want to suppress error messages (but not styling) for select fields and radio buttons in my app to reduce visual clutter. As far as i'm aware this feature doesn't exist.

Currently trying to do it with a custom message provider but it feels hacky.

A config option or property on the respective field would work well.

I could see others needing this feature as well. Whats your take on it?

Hello,
firstly, thanks for this great lib !
Would it be possible to extract the errorMessages object (https://github.com/jonsamwell/angular-auto-validate/blob/master/src/services/defaultErrorMessageResolver.js#L20) to be able to translate it easily, as a separate file from the dist ? Then we could be able to load the right langage at the app initialization or by including the right file.
Example :
/dist
jcs-auto-validate.min.js
/lang
jcs-auto-validate-en-US.js
jcs-auto-validate-fr-FR.js
...

I've been having trouble using 'validator.enable(false)' to enable automatic validations in combination with the 'auto-validate-enabled="true"' attribute on a form as described on line 77 of the dist file.

I believe the I believe in a past version i had used the 'disable-dynamic-validation="false"' attribute on the form.

The parseOptions method on line 1036 of the dist file sets the disabled flag whenever the global flag is set OR the form level flag is set. It never checks for the 'auto-validate-enabled' flag.

    function parseOptions(ctrl, validator, attrs) {
        var opts = ctrl.autoValidateFormOptions = ctrl.autoValidateFormOptions || angular.copy(validator.defaultFormValidationOptions);
        opts.forceValidation = false;
        opts.disabled = !validator.isEnabled() || parseBooleanAttributeValue(attrs.disableDynamicValidation);
        opts.validateNonVisibleControls = parseBooleanAttributeValue(attrs.validateNonVisibleControls);
        opts.removeExternalValidationErrorsOnSubmit = attrs.removeExternalValidationErrorsOnSubmit === undefined ? true : parseBooleanAttributeValue(attrs.removeExternalValidationErrorsOnSubmit);
    }

There is one scenario where the user might experience a lack of immediate response. Here's a plunker to illustrate the case : http://plnkr.co/edit/8l73MfOfGENwymnPOVGv?p=preview Try the following : write an invalid value in the username (e.g. 'a') click inside the password, the error message appears below the first input. Now write a valid value (e.g. 'aaaa') for the password. If you now click on the 'sign in' button, nothing happens since the first input is invalid. Now go back to username, write a valid value (e.g. 'aaaa') and click directly on 'sign in'. Nothing happens either since this only blurs the first input out and sets the valid format. Now click again on the 'sign in' button. Now 'signed in' should appear next to 'result :' at the bottom. So basically you would need to click two times on the button to get your submit function fired.

The documentation at http://jonsamwell.github.io/angular-auto-validate/ say to use setDefaultErrorMessageResolver but there is only setErrorMessageResolver

Also, the docs on how to set it are incomplete: validator.setDefaultErrorMessageResolver(myCustomErrorMessageResolver) should read: validator.setErrorMessageResolver(myCustomErrorMessageResolver.resolve)

The search for special behaviours continues!

Let's have a look at this case : an input without 'required' attribute. If you write something inside the input, immediately erase it and click outside, the input is empty but the validation state is valid. In my opinion it's would be better to return to the a reset status.

Here's a plunker (test with the username input) :
http://plnkr.co/edit/jHDjEpy1VOs4UjXGzD26?p=preview

Hi,
I wanted to test adding server side errors. When I submit the form, fields gets highlighed, but when I edit it. It doesn't remove the validation. Simple example: http://plnkr.co/edit/Ep6XsbyrFDYHkNlhSWBO?p=info

In the myCustomElementModifier factory, the factory allows me to add in classes to the input element that is being validated. However, is there a way that I can add in attribute such as tooltip from angular bootstrap?

For example, with the following code:

app.factory('myCustomElementModifier', [
        function () {
            var /**
             makeValid = function (el) {
            // do some code here...
            },
            makeInvalid = function (el, errorMsg) {
             el.addClass('redtext');
             el.attr("tooltip", "Tooltip here!");
           },
         return {
               makeValid: makeValid,
               makeInvalid: makeInvalid,
               makeDefault: makeDefault,
               key: 'myCustomModifierKey'
            };
  }]);

Whenver the input is invalid, it will turn my input text into red color by adding the redtext. It does append the tootip attribute tooltip="Tooltip here!" into the input element but there is no trigger for the tooltip to popup upon hovering.

I think I know this is because the directive needs to be recompiled, before the tooltip directive is actually applied. May I know how to achieve this, or point me to the right direction maybe?

This is a bower standard. I'm not in a position to create a PR at the moment, but will do as soon as I get the chance if need be.

First off, think the library is awesome, just what I was looking for with error message handling.

Anyway to provide an opt-in directive instead of automatically handling all ng-submit and ng-model directives? Something like "auto-validate" on the form that handles the submit method and attaches the behavior to all input elements.

Not sure if I can articulate why, seems better to declare what I am using to my fellow developers.

Brian

I'm using a form that looks like this:

  <div class="small-10 small-offset-1 end medium-4 medium-offset-4 ">
        <form name="signupForm">
                <div  class="form-row">
                    <input type="text"
                        name="name"
                        ng-model="household.users[0].name"
                        placeholder="Your First Name"
                        ng-minlength="3"
                        ng-model-options="{updateOn: 'blur'}"
                        required 
                        ng-click="inputClicked()"/>
                    <label ng-show="showlabel">Your First Name</label>
                </div>
        </form>
    </div>
[error messages are showing up here]

The auto-validate is working fine, but the error messages are being appended to after the div containing the form. Is there a way to specify where the error messages appear? I see them working properly on the demo site but don't see how that's being specified. Thanks

Having working Plunker to demonstrate how to setup and use (that is always kept up to date)

Since I updated to the lastest version, I have an error trigerred each time I leave a page containing a form.
To be sure I removed your library from my project and the error didn't trigger.
Here is the error :

TypeError: undefined is not a function
    at k.$broadcast (http://localhost:8080/cqst/app/bundle.js:155:99)
    at k.$destroy (http://localhost:8080/cqst/app/bundle.js:151:205)
    at i (http://localhost:8080/cqst/app/bundle.js:40:14388)
    at http://localhost:8080/cqst/app/bundle.js:40:14646
    at http://localhost:8080/cqst/app/bundle.js:87:367
    at j (http://localhost:8080/cqst/app/bundle.js:40:14566)
    at http://localhost:8080/cqst/app/bundle.js:40:14835
    at k.$broadcast (http://localhost:8080/cqst/app/bundle.js:155:99)
    at v.transition.N.then.v.transition.v.transition (http://localhost:8080/cqst/app/bundle.js:40:10417)
    at J (http://localhost:8080/cqst/app/bundle.js:140:469) 

I know it's not very explicit, but I'm pretty sure it's when the scope is destroyed, as it triggers only when I switch between my views.

Hi,

I use a localization service ( https://github.com/lavinjj/angularjs-localizationservice ) . This solution allows to translate the element attributes . I have a login form , which translate placeholders . In this case, validation behaves abnormally. Click in login textbox , then into a password textbox and login textbox back and i see an error message . When Idelete a placeholders , then the errors displayed right after submitting the form .

Thanks for help.

Josef Zelinka

I'v tried to reset of an input after clicking on a button. But the glyphicon-ok and the has-feedback class stays even if I'm using the $setPristine method.

Here's a plunker to illustrate : http://plnkr.co/edit/Sa9YZDofPEYIkpNDt31I?p=preview

Here's another with a simple case where it works
http://plnkr.co/edit/815Bml?p=preview

Is this something that can be fixed in your code?

Hi,
I've setup an input with ng-model-options="{updateOn: 'submit'}" but when I click submit no visible signs of validation apperas. Would it be possible to add such a functionlity?

Best regards,
Mateusz

In my run function I call setI18nFileRootPath then setCulture. Theoretically setCulture takes care of loading the culture. Because en-us/en-gb are hard coded in the js setCulture does not load these from the newly specified error lang file thus fails to resolve custom messages.

As a temporary fix I have set both undefined.

Glancing at the code it appears setCulture is only ever called by a user. So it seems the role of this check is solely caching. Perhaps the best solution would be to keep this method similar to how it is now and rename the default errors lang object and fallback to it where no real cache exists?

Hi is it possible to have the submit button outside the form ?
I tried to put an ng-click on the button and $('#form_id').submit(), and it doesn't work.
Any idea ?
sorry I am a beginner with angularJS
Thank you !

When submitting a form, auto-validate goes ahead and runs through the validations for the whole form (great!), however, it appears to be setting the has-error class to the form element (when using bootstrap) which causes fields that are not invalid to be shown in the has-error red, incorrectly. When I use chrome to remove the has-error class from the form element, only the form elements that are actually invalid are indicated as I would expect.

I know this initially sounds like something that would never be necessary, but when using a third party control set I ran into this. Specifically, almost any third party solution for select elements use a stylized form of a list and hides the actual select element. I forked this repo and created that configuration functionality but have not yet built tests. Feel free to take a look. jmckearin/angular-auto-validate

Disclaimer: Ignore any version changes that I did.

Hi there, I need some help from experts with custom validation. In my case the validation message has a dynamic value. Little background, I have a number field with decimal value. End user can customize it to set whatever precision they want for the decimal. I am planning to use RegEx to validate the value and I must use a directive. Problem is, after I set the ExternalValidation, its shows the custom message but then it gets replaced with "Please add error message for null". How do I make the original message stick? Or, is there another way to achieve this?

Below is my code for your reference.

    .directive('cfNumber', ['validationManager', '$window',function(validationManager, $window) {
        return {
            restrict: 'A',
            require: 'ngModel',
            priority: 100,
            link: function($scope, iEl, iAttrs, ctrl) {
                $scope.precision = 4;//$scope.input.options.precision;
                var regex = /^\d+(()|(\.\d{1,4})?)$/;
                var validator = function(value){
                        if(value.toString().length > 0 && (parseFloat(value) === 'NaN' || !regex.test(parseFloat(value)))){
                            ctrl.$valid = false;
                            ctrl.$setValidity(null,false);
                            ctrl.setExternalValidation(null,"Number must have " + $scope.precision + " decimal places.",false);
                            //validationManager.setElementValidationError(iEl, null, "Number must have " + $scope.precision + " decimal places.");
                        }
                        return $window.parseFloat(value) ? ''+value : value;
                    };
                ctrl.$parsers.push(validator);
                ctrl.$formatters.push(validator);
            }
        }
    }])

Another option is to set the error message like following:

defaultErrorMessageResolver.getErrorMessages().then(function(errorMessages) {
errorMessages['decimalValidation'] = 'Number must have {0} decimal places.';
});

With below directive, however, I'm not sure how to replace {0} with that value that comes in from the input field <input ng-model="numberField" validate-decimal="4" type="number">

.directive('validateDecimal', ['validationManager', '$window',function(validationManager, $window) {
return {
restrict: 'A',
require: 'ngModel',
priority: 100,
link: function($scope, iEl, iAttrs, ctrl) {
$scope.precision = 4;//$scope.input.options.precision;
var regex = /^\d+(()|(.\d{1,4})?)$/;
var validator = function(value){
if(value.toString().length > 0 && (parseFloat(value) === 'NaN' || !regex.test(parseFloat(value)))){
ctrl.$setValidity('decimalValidation',false);
}
else {
ctrl.$setValidity('decimalValidation',true);
}
return $window.parseFloat(value) ? ''+value : value;
};
ctrl.$parsers.push(validator);
ctrl.$formatters.push(validator);
}
}
}])

Hi, thanks for great AngularJS module!

All work great at version "v1.13.22 - 2014-12-04" but after change at version "v1.13.22 - 2014-12-06" I got error:
TypeError: Cannot read property 'find' of undefined
Line 288 in version "v1.13.22 - 2014-12-06"

angular.forEach(el.find('span'), function (spanEl) {

My HTML code is:

<div class="form-group" >
   <label class="col-sm-2 control-label">Role</label>
    <div class="col-sm-10" >
        <div ng-repeat="name in jsonRoleName" >
            <div class="radio" > 
                <label for="{{name}}" > <input type="radio" ng-model="UserIdentityData.Role" ng-value="name" id="{{name}}" name="favorite" > {{name}} </label>
            </div>
        </div>
    </div>
</div>

Thanks.
Stanislav

I can't even get started using this. Getting an error: "TypeError: Cannot read property 'forceValidation' of undefined"

Any ideas?

I ran across an issue today where one of my inputs had ng-maxlength="100". Every time I saw the error message, it would have the value 2147483647 instead of 100. As it turns out, the code below checks for the attribute matching the errorType by default. maxlength is the browser property that limits the physical amount of characters that can be entered into the field. In IE9, this became a problem because even though I did not physically specify maxlength, the browser defaulted the property. Because of this code, the parameter was found and it never looked at my ng-maxlength attribute.

parameter = el.attr(errorType);
if (parameter === undefined) {
    parameter = el.attr('data-ng-' + errorType) || el.attr('ng-' + errorType);
}

Because this is specifically angular, could we not alter the code to look for ng- version of the attribute first and have the non-prefixed attribute as a fallback? Such as:

parameter = el.attr('ng-' + errorType);
if (parameter === undefined) {
    parameter = el.attr('data-ng-' + errorType) || el.attr(errorType);
}

I had already created a custom message resolver for my app for other reasons so I just altered this code in my version, however, I think that this should be a change in the DefaultMessageResolver.

I couldn't load the french translation because of a small typo :
jcs-auto-validate_fr-fr.json should be named jcs-auto-validate_fr-FR.json,
maybe it's the same for jcs-auto-validate_en-us.json to jcs-auto-validate_en-US.json

I think we should add an option to enable/disable styling on the modifier.
In my case, I don't want the valid inputs to turn green when I submit. I just want to see the error styling.

What do you think about something like this : https://gist.github.com/jgoux/82f2450dcda9eb012421
Then :

angular.module('my-app')
        .run([
        'bootstrap3ElementModifier',
        function (bootstrap3ElementModifier) {
              bootstrap3ElementModifier.enableValidStyling(false);
       }]);

validateElement() returns an undefined (on line 46 of validationManager.js) if element doesn't have any validation attributes on it (e.g.: required, min-length, etc).

Fix is to apply a default value to isValid on line 18.

Particularly; If i were to set required on a field, click into, then click to another field.

In this case, validation occurs in angular marking the field invalid, but we do not style the field differently or show the relevant error.

I'm looking into addressing this. I added

element.bind('blur', function(){
    ngModelCtrl.$setTouched();
    validationManager.validateElement(ngModelCtrl, element);
});

to the ngModelDirective decorator hook. This fires when a user click in then clicks out as well as when a user tabs through/by the field. I set $touched here because it is not set until after validations occurs.

I modified validateElement 's needsValidation variable to check if the element has been touched as follows.

needsValidation = !modelCtrl.$pristine || modelCtrl.$touched || forceValidation,

That behavior is inline what I want.

Sidenote: I noticed we have a variable for isValid set to !modelCtrl.$invalid in the validateElement function. We should just check modelCtrl.$valid instead.

The main role of this bugfix for me is to address the required validation. If a field is not required and nothing is less than are min, do we care? Possibly...

Anyways, do you guys have any feedback on my approach?
Do you agree it is better practice/UX to validate when an element is touched even if nothing changes?
Is debounce not firing in this case considered a bug with angular/should it be brought up there?
Do you think validate on touched should be an option/configurable or default? Imo it should be default, but i'm bias. :p

Anyways looking to do a pull request if you guys feel this would be valuable.

Hi,

I'm coding my first angular-app right now a found your module to validate my forms. Really great.
But since I switched to angular 1.3.0 I'll get an error "link is undefined" on line 1022. Until now, everything seems to work. So for myself I could just comment out the lines 1022-1025. But that's no real solution.

So maybe you'll find a solution for this.

Another small bug with the format. Here's a plunker : http://plnkr.co/edit/81EhrtkbBKLwOktNutqx?p=preview
You will need to view this in full screen since it's an inline form. When the format is valid the input's width is increased, and when it's invalid the X is placed on the bottom right.
I will take a look at bootstrap3ElementModifier.js in the src to find out what is happening.

Attribute "element-modifier" is not applied to element descendants for complex elements like timepicker (html table with inputs and button is generated here). The default modifier process these inputs and button.

Hi there, really loving this module. It works great.

I have a feature request. I'm building a form that has a number of repeating elements. To keep the page more readable, i've nested some of the repeating form elements in an accordion panel. This obviously creates issues with the input boxes when they are closed.

I'm wondering if it is possible to add a directive that can tell if any of the input boxes inside that container are invalid, and then possibly add a class to that container so I can add a visual representation of groups of elements that are invalid.

Thanks.

I had a problem with the help-text being appended to the form-group element.
As I'm using this particular template :

.form-group
    label.control-label.col-lg-2(for='folderNumber') Folder number
    .col-lg-10
        input.form-control(name='folderNumber', type='text', id='folderNumber',
            ng-model='vm.form.folderNumber',
            required='')

The "help-text" element was not aligned with my input (in the .col-lg-10 div).
It would be great to define an insertAfter function to be able to insert the elements directly after the input :

insertAfter = function (referenceNode, newNode) {
                referenceNode[0].parentNode.insertBefore(newNode[0], referenceNode[0].nextSibling);
            }

And then :

makeInvalid = function (el, errorMsg) {
    var frmGroupEl = findFormGroupElement(el),
        helpTextEl = angular.element('<span class="help-block has-error error-msg">' + errorMsg + '</span>');
    reset(frmGroupEl);
    frmGroupEl.addClass('has-error has-feedback');
    insertAfter(el, helpTextEl);
    if (addValidationStateIcons) {
        insertAfter(el, angular.element('<span class="glyphicon glyphicon-remove form-control-feedback"></span>'));
    }
};

When a user clicks the submit button in a form, the paradigm I am following will present a growl message to the user indicating to correct the form errors, jump to the top-most error, etc. I also need those errors to be indicated. Right now, it appears this module has the ability to do one or the other, not both. Could we add some sort of addition ng-submit-* option so that the validation still occurs (highlighting all invalid fields and showing error messages) but it also executes the submit method on the controller so that we can execute additional logic?

Missing documentation for register-custom-form-control directive

Is there a way to get the form to validate without ng-submit?

I'm using ngUpload, and it also uses a submit event listener to do its submission, so I'm not using ng-submit at all. ngUpload does check to make sure formController.$valid is true before submitting, then it returns false. After that auto validate doesn't appear to be triggered. (This is separate from #52 where I removed ngUpload entirely just trying to get it working with the most basic settings.)

When using version 1.7.23 of the plugin I get the error message "frmOptions is undefined". After investigation I found that the getFormOptions function return undefined, is it normal?

By browsing the source code I've seen that version 1.7.22 introduces a breaking change on the function that is currently failing. Do I need to do something on my side to resolve this issue?

Thanks!

Is it possible to add asterisk to required elements?

Love the work you're doing with this...

I would love to override the 'pattern' message as it's not that user-friendly. I can't expect my users to understand the constraints of a regex! :)

Anyways, I have not been successful doing this as per the docs here. Could you please provide a pointer or a little help getting this working? I assume the custom error message resolver is the way to go? Is this necessary for overriding just 1 message?

Hi,
is there a reason why you chose to use the "help-text" class in the bootstrap3ElementModifier ? If you use the "help-block" class instead, your message will be stylized by the "has-error" class applied on the formGroup element.
I'll hapilly make some PR if you want to.

Is there any way to validate a single element or all elements in a subform? I would like to show the errors using bootstrap styling when the subform is submitted.

Hi !

First of all happy new year and I'd like to say it's an amazing stuff you've got right there !
I'm kinda new to Angular but I'm hoping what I'm asking will not be trivial or not too stupid...

Is there a way I can fetch the errorMsg which was set in a custom error resolver inside the angular controller after submitting the form ? The idea is basically to be able to display an alert popup displaying the first error message of the form (for instance by following the natural order of fields and their respective validation rules in the DOM).

Thanks in advance and cheers

A form I have has two tabs within it. The Entire form is/must be submitted at once. I validate on save, however angular-auto-validate does not validate hidden fields by design. Initially I assume this was impossible because the DOM elements don't exist. I had issues calling validate form on the individual form elements (after making visible of coarse). However this actually works fine.

It would be great to have it validate all fields. Perhaps by default with a user config; or even just a config option. User's with hidden fields could add a property to those fields.

What are your thoughts?

I'm trying to figure out how to implement a required if type of scenario. For example I have a set of radio buttons and if one is checked then I show some more form elements all of which should be required if that radio button is checked but not required if it is not.
Ideally, the plugin should automatically skip validation on hidden elements, but that's not happening.

I'm thinking I'll need to do this manually but hope not.
Please advise.

I'm using v1.18.4 and when I submit a form, if it is pristine, even if there are errors, it submits without validation. If I change a field that needs validation, and submit, then it only shows the validation error on that field, not any of the others even if they are wrong.

I tried copying the demo that's here:
http://jonsamwell.github.io/angular-auto-validate/#demo
And that didn't work either. Then I checked the version it's using, 1.0.17 and then tried that, and at least in that version, it popped up all the errors, albeit it had other issues.

Validation doesn't seem to be working as expected. Can we get a plunker with a current version with an example? All the examples I found where code is posted on the page still use "form-row" as the class rather than form-group and give errors about it. There doesn't seem to be any recent working version I can find.

Good morning. I'm trying to write a custom phone validator that calls a web API that uses Google's phones library to validate the phone number.
I've got the back end working fine but am having issues with the directive.
What I have so far is based on the code in the demo. Here it is
app.directive('validatephone', ['ValidatePhoneService',
function (ValidatePhoneService) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
var validateFn = function (viewValue) {
if (ctrl.$isEmpty(viewValue)) {
ctrl.$setValidity('validatephone', false);
return undefined;
}

                ValidatePhoneService.get({ phone: viewValue }).$promise.then(function (result) {
                    if (result.IsPhoneValid) {
                        ctrl.$setViewValue(result.PhoneNumber);
                        ctrl.$setValidity('validatephone', true);
                        return result.PhoneNumber;
                    } else {
                        ctrl.$setValidity('validatephone', false);
                        return undefined;
                    }
                });
            };

            ctrl.$parsers.push(validateFn);
            ctrl.$formatters.push(validateFn);
        }
    }
}]);

And I use it like this:

Note: We are using Angular 1.2, not 1.3.
I'm having two issues.

1. Even though I have UpdateOn set to blur (which worked for required validation before I started this) it is calling the directive on each key press. I'm assuming there is something I need to add in the directive to ignore calls until blur? I don't know how to do that.
2. I want to return the formatted phone number from the service to the text box. I'm calling
   ctrl.$setViewValue(result.PhoneNumber);
   where result.PhoneNumber is the corrected phone number and have confirmed that $viewValue is being set but the text box does not change.

Any thoughts or suggestions on how to fix these two?