Skip to content
This repository has been archived by the owner on Jul 1, 2020. It is now read-only.

Making validation trigger on 'blur' optional #76

Closed
pdzugas opened this issue Oct 17, 2015 · 5 comments
Closed

Making validation trigger on 'blur' optional #76

pdzugas opened this issue Oct 17, 2015 · 5 comments
Labels

Comments

@pdzugas
Copy link

pdzugas commented Oct 17, 2015

Your plugin is great but there is one feature we miss a lot in our current project. It's a SPA (single page application) with many Angular views loaded dynamically as user fills out forms (usually one form per screen). We need to trigger the validation only after Submit/Next button was clicked. I was able to "disable" on-the-fly validation as user types in the fields by setting debounce to insanely high value of 24 hours and also commented out lines 94 & 359 in validation-directive.js elm.bind('blur', blurHandler);
However, I'm not sure if my above hack is enough to achieve what was intended i.e. disable validation from being triggered when input field got 'blur' event. Would you be so kind to implement new option in global options, maybe something like { trigger: null } when validation should not trigger on any input event whereas default value would be { trigger: 'blur' } which means that 'blur' event handler should be attached as a trigger event for validation to fire. Also, setting debounce to http://www.w3schools.com/jsref/jsref_infinity.asp could effectively disable validate-as-user-types feature but that's a minor issue for now.
Thank you very much for your attention and continuous support to this project.

@ghiscoding
Copy link
Owner

People seem to forget that you could also use interpolation to create/remove validation dynamically or use the Service to build validation dynamically as well.

I can look in adding a global option but it won't be trigger as you want. I only deal with blur and I don't want to make people think they can use other type of triggers. But even if you remove the onBlur, your element will still be invalid. You just won't see the error message since I only display error after it's $touched or $dirty but the form itself is still invalid. You are just hiding the error, even though it still exist.I don't think it's really what you want... Using interpolation is probably your best option.

@ghiscoding
Copy link
Owner

Considering what I wrote before, please give some feedback before I make any changes in my library. If I modify any code, it would probably a global option like you wish, but the name would be different since I don't want people to think they can use any type of triggers. I would probably do something like this option { onBlur: false } (it would be true by default).

Again consider what I wrote in my previous message, validation on the form would most be probably still be invalid, is that really what you want?

Please give some feedback

@pdzugas
Copy link
Author

pdzugas commented Oct 20, 2015

Well, all we wanted to achieve was this:
The main page index.html has mainController attached where all validation should occur by calling dedicated

function next(form) {
   var vs = new validationService();
   if (vs.checkFormValidity(form)) {
      // proceed to another view
   };
}

The form argument is passed from child controller(s) which are loaded into ng-view as needed, something like below

<form novalidate name="formSsn">
    <input type="text" name="social-number" ng-model="wizard.userInfo.ssn" class="input" ui-mask="999-99-9999" ui-options="{clearOnBlur:false}" placeholder="###-##-####" ui-mask-placeholder  validation="required:alt=Social security number is required." autofocus>
</form>
<a ng-click="next(formSsn)">Next</a>

However, the validation doesn't work as expected. Maybe there are collisions with ui-mask plugin internals but I was able to click Next button and proceed to another view quite often without any validation error popping out while ngModel value being "undefined" which is not empty string but shouldn't be considered a valid input here either. When we added regex validator rule pattern=/\d{9}/ in addition to required it didn't help much either, because then the validation error about invalid format popped out even when correct input was entered while cursor still blinked at the end of the field.

@ghiscoding
Copy link
Owner

I did some investigation and it took me some time to get your setup working. You should seriously build a Plunker if you want me to help you on the next time...

For the second error, I found out that I was using event.target.value of the onblur to get the value and that was pulling ___-__-____ as the actual value and so that was valid for the required and also for the value itself since it was following the actual mask.

I'd like to know, does your second problem with the ui-mask is it related to the first onblur problem, or are they completely non-related and different issues? Please give some feedback before I push some code for closing the issue properly.

ghiscoding added a commit that referenced this issue Oct 25, 2015
ghiscoding added a commit that referenced this issue Oct 26, 2015
@ghiscoding ghiscoding added the bug label Oct 27, 2015
@ghiscoding
Copy link
Owner

The fix was pushed in latest release v1.4.11

ghiscoding added a commit that referenced this issue Nov 4, 2015
'strValue is not defined' error when using `max` auto-detect validator.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants