Skip to content

AngularJS directive for validating form fields only after user has stopped typing.

License

Notifications You must be signed in to change notification settings

calendee/val-on-timeout

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

val-on-timeout

val-on-timeout improves the user experience for forms. When the user has stopped activity in a field, validation errors will be displayed.

Features

  • Configurable timeout after pause in typing
  • Configurable timeout on focus
  • Configurable timeout on blur

Usage

Simply include as a dependency in your module.

angular.module('SuperAwesomeApp', ['calendee.valOnTimeout'])

Examples

Detect When User Stops Typing

NOTE : The default timeout for typing is 1250ms.

<input
        type="text"
        placeholder="Your First Name Please"
        name="givenName"
        ng-model="user.givenName"
        ng-minlength="10"
        ng-maxlength="100"
        ng-required="true"
        val-on-timeout
/>

<small class="error" ng-show="testing.givenName.$error.minlength && testing.givenName.$timedout">We don't accept people with short names. Go big or go away.</small>
<small class="error" ng-show="testing.givenName.$error.maxlength && testing.givenName.$timedout">That name is super long.  We don't like you.  Go away.</small>
<small class="error" ng-show="testing.givenName.$error.required && testing.givenName.$timedout">People with no names don't exist.  Go away.</small>

Detect When User Stops Typing With Custom Timeout Limit

<input
        type="text"
        placeholder="Your First Name Please"
        name="givenName"
        ng-model="user.givenName"
        ng-minlength="10"
        ng-maxlength="100"
        ng-required="true"
        val-on-timeout
        typing-limit="2000"
/>

<small class="error" ng-show="testing.givenName.$error.minlength && testing.givenName.$timedout">We don't accept people with short names. Go big or go away.</small>
<small class="error" ng-show="testing.givenName.$error.maxlength && testing.givenName.$timedout">That name is super long.  We don't like you.  Go away.</small>
<small class="error" ng-show="testing.givenName.$error.required && testing.givenName.$timedout">People with no names don't exist.  Go away.</small>

Detect When Field Has Had Focus For Too Long

If a user focuses on a field but fails to begin typing, the timeout can be detected. The default focus timeout is 5000ms. It can be configured by providing any value with the attribute.

<input
        type="text"
        placeholder="Your First Name Please"
        name="givenName"
        ng-model="user.givenName"
        ng-minlength="10"
        ng-maxlength="100"
        ng-required="true"
        val-on-timeout
        typing-limit="2000"
        focus-limit="3000"
/>

<small class="error" ng-show="testing.givenName.$error.minlength && testing.givenName.$timedout">We don't accept people with short names. Go big or go away.</small>
<small class="error" ng-show="testing.givenName.$error.maxlength && testing.givenName.$timedout">That name is super long.  We don't like you.  Go away.</small>
<small class="error" ng-show="testing.givenName.$error.required && testing.givenName.$timedout">People with no names don't exist.  Go away.</small>

Detect When Field Blurred

If a field loses focus, you can apply the timeout to display errors. The default focus timeout is 500ms. It can be configured by providing any value with the attribute.

<input
        type="text"
        placeholder="Your First Name Please"
        name="givenName"
        ng-model="user.givenName"
        ng-minlength="10"
        ng-maxlength="100"
        ng-required="true"
        val-on-timeout
        typing-limit="2000"
        focus-limit="3000"
        blur-limit="750"
/>

<small class="error" ng-show="testing.givenName.$error.minlength && testing.givenName.$timedout">We don't accept people with short names. Go big or go away.</small>
<small class="error" ng-show="testing.givenName.$error.maxlength && testing.givenName.$timedout">That name is super long.  We don't like you.  Go away.</small>
<small class="error" ng-show="testing.givenName.$error.required && testing.givenName.$timedout">People with no names don't exist.  Go away.</small>

Demo

To run a demo, start a local Python server from the repository's root directory :

python -m SimpleHTTPServer 3001

Then, go to : http://localhost:3001/example/

Testing

From the project root directory, run karma start.

Authors

Justin Noel

Acknowledgements

Thanks to Ari Lerner (@auser) for the inspiration for this directive. His ngFocus directive lead the way.

I whined about my complaints with Angular JS validation to Sharon DiOrio (@sharondio) while at #ng-conf. She didn't take pity and suggested I do something about it. Thanks for the push.

LICENSE

val-on-timeout is licensed under the MIT Open Source license. For more information, see the LICENSE file in this repository.

About

AngularJS directive for validating form fields only after user has stopped typing.

Resources

License

Stars

Watchers

Forks

Packages

No packages published