Skip to content

Commit cae1b13

Browse files
author
Kurtis LoVerde
committed
improved events
1 parent f1eed00 commit cae1b13

File tree

4 files changed

+105
-72
lines changed

4 files changed

+105
-72
lines changed

‎README.md‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
# This project is unfinished and is currently under development. Check back soon for the first release.
2-
3-
41
RestrictedTextField v1.0
52
========================
63

@@ -45,7 +42,18 @@ ResrictedTextField is a jQuery plugin which enforces data formats on HTML text b
4542
| Property | Description | Data Type | Valid Values | Default Value |
4643
| -------- | --------------|---------- |----------------------|---------------|
4744
| `type` | Text field type | string | alpha, upperAlpha, lowerAlpha, alphaSpace, upperAlphaSpace, lowerAlphaSpace, alphanumeric, upperAlphanumeric, lowerAlphanumeric, alphanumericSpace, upperAlphanumericSpace, lowerAlphanumericSpace, int, positiveInt, negativeInt, float, positiveFloat, negativeFloat, money, positiveMoney, negativeMoney, accountingMoney, negativeAccountingMoney| null |
48-
| `preventInvalidInput` | When enabled, invalid keystrokes are prevented. When disabled, invalid keystrokes are not prevented. In either case, the events `validationFailure`, `validationSuccess` and `inputInProgress` will fire. | boolean | true/false | true |
45+
| `preventInvalidInput` | When enabled, invalid keystrokes are ignored (the value of the text field is not updated). When disabled, invalid keystrokes are not ignored. | boolean | true/false | true |
46+
47+
48+
## Events
49+
50+
The following events are fired based on the state of the text field:
51+
52+
| Event name | Description |
53+
| ------------------| ----------------------------------------------------------------|
54+
| inputIgnored | Fires when an invalid keystroke is ignored. `preventInvalidInput` must be enabled for this event to fire. |
55+
| validationFailed | Fires when an invalid keystroke is made when `preventInvalidInput` is disabled. Also fires if validation performed on blur() fails. |
56+
| validationSuccess | Fires when the user removes invalid data when `preventInvalidInput` is disabled. Also fires if validation performed on blur() passes. |
4957

5058

5159
#### Example

‎demo.html‎

Lines changed: 59 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,12 @@
2020
<script type="text/javascript" src="jquery.restrictedtextfield.js"></script>
2121

2222
<style type="text/css">
23-
input.error {
24-
border: 2px solid red;
23+
input.inputIgnored {
24+
border: 2px solid #FC8D3D;
25+
}
26+
27+
input.invalid {
28+
border: 2px solid #FF0000;
2529
}
2630

2731
h2 {
@@ -49,13 +53,32 @@
4953
</style>
5054

5155
<script type="text/javascript">
56+
"use strict";
57+
5258
function createCustomTypes() {
5359
var cfg= new $.fn.RestrictedTextFieldConfig();
5460

5561
cfg.addType( "vowels", /^[aeiou]*$/, null );
5662
cfg.addType( "additionExpr", /^\d+\+\d+$/, /^\d+$|^\d+\+$/ );
5763
}
5864

65+
function flashBorder( jqField, cssClass, times, delayMillis ) {
66+
if( times === -2 ) {
67+
jqField.removeClass( cssClass );
68+
return;
69+
}
70+
71+
if( jqField.hasClass(cssClass) ) {
72+
jqField.removeClass( cssClass );
73+
} else {
74+
jqField.addClass( cssClass );
75+
}
76+
77+
setTimeout( function() {
78+
flashBorder( jqField, cssClass, --times, delayMillis );
79+
}, delayMillis );
80+
}
81+
5982
$( document ).ready( function() {
6083
createCustomTypes();
6184

@@ -64,18 +87,6 @@
6487
preventInvalidInput : false
6588
} );
6689

67-
// add listeners for RestrictedTextField events
68-
69-
$( "#txtAlpha" ).on( "validationFailure", function(event) {
70-
$( this ).addClass( "error" );
71-
} );
72-
73-
$( "#txtAlpha" ).on( "validationSuccess", function() {
74-
$( this ).removeClass( "error" );
75-
} );
76-
77-
// initialize the rest
78-
7990
$( "#txtUpperAlpha" ).restrictedTextField( { type : "upperAlpha" } );
8091
$( "#txtLowerAlpha" ).restrictedTextField( { type : "lowerAlpha" } );
8192
$( "#txtAlphaSpace" ).restrictedTextField( { type : "alphaSpace" } );
@@ -88,7 +99,7 @@
8899
$( "#txtUpperAlphanumSpace" ).restrictedTextField( { type : "upperAlphanumericSpace" } );
89100
$( "#txtLowerAlphanumSpace" ).restrictedTextField( { type : "lowerAlphanumericSpace" } );
90101
$( "#txtInt" ).restrictedTextField( { type : "int" } );
91-
$( "#txtPosInt" ).restrictedTextField( { type : "positiveInt"} );
102+
$( "#txtPosInt" ).restrictedTextField( { type : "positiveInt" } );
92103
$( "#txtNegInt" ).restrictedTextField( { type : "negativeInt" } );
93104
$( "#txtFloat" ).restrictedTextField( { type : "float" } );
94105
$( "#txtPosFloat" ).restrictedTextField( { type : "positiveFloat" } );
@@ -100,6 +111,27 @@
100111
$( "#txtNegAccountingMoney" ).restrictedTextField( { type : "negativeAccountingMoney" } );
101112
$( "#txtVowelsOnly" ).restrictedTextField( { type : "vowels" } );
102113
$( "#txtAdditionExpr" ).restrictedTextField( { type : "additionExpr" } );
114+
115+
$( "input" ).on( "inputIgnored", function(event) {
116+
var jqThis = $( this );
117+
118+
jqThis.removeClass( "invalid" );
119+
jqThis.removeClass( "inputIgnored" );
120+
121+
flashBorder( jqThis, "inputIgnored", 3, 150 );
122+
} )
123+
.on( "validationFailed", function(event) {
124+
var jqThis = $( this );
125+
126+
jqThis.removeClass( "inputIgnored" );
127+
jqThis.addClass( "invalid" );
128+
} )
129+
.on( "validationSuccess", function() {
130+
var jqThis = $( this );
131+
132+
jqThis.removeClass( "inputIgnored" );
133+
jqThis.removeClass( "invalid" );
134+
} );
103135
} );
104136
</script>
105137
</head>
@@ -109,18 +141,24 @@ <h2>The first rule of programming: never trust your data. If you're submitting
109141

110142
<h4>Capturing validation failures</h4>
111143
<p>
112-
This text field has a listener to capture the <code>validationFailure</code> and <code>validationSuccess</code>
113-
events. This text field has been configured to allow invalid text to remain in the field. The field's border
114-
color will be red for as long as the invalid input remains.
144+
This text field has been configured to allow invalid text to remain in the field. When the invalid keystroke
145+
fails validation, the <code>validationFailed</code> event fires. When the invalid data is removed, the
146+
<code>validationSuccess</code> event fires. The <code>validationFailed</code> listener turns the border red,
147+
and it remains red until the <code>validationSuccess</code> listener turns it off. When the blur event
148+
fires, the field is validated again, and one of these two events will fire.
115149
</p>
116150
<h4>Alpha characters (A-Z, case-insensitive)</h4>
117151
<input type="text" id="txtAlpha" />
118152

119153
<div id="break">
120154
<p>
121-
The remaining examples prevent invalid text from being entered at all, so although you could capture
122-
<code>validationFailure</code> and <code>validationSuccess</code>, you don't really need to - unless
123-
you're planning on calling attention to the fact that the user's input was ignored.
155+
The remaining examples work differently. Instead of allowing invalid input to remain in the field, the
156+
invalid keystroke is ignored, so the field never has an invalid value. Events work differently in this
157+
scenario. When an invalid keystroke is ignored, the <code>inputIgnored</code> event fires. The
158+
<code>validationFailed</code> event does not fire in response to an invalid keystroke. The
159+
<code>inputIgnored</code> listener flashes the border of the textbox to alert the user that the
160+
keystroke was ignored. When the blur event fires, the field is validated again, and either the
161+
<code>validationFailed</code> or <code>validationSuccess</code> event will fire.
124162
</p>
125163
</div>
126164

‎jquery.restrictedtextfield.js‎

Lines changed: 33 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,9 @@
4848
preventInvalidInput : true
4949
}, options );
5050

51-
var EVENT_VALIDATION_FAILURE = "validationFailure",
52-
EVENT_VALIDATION_SUCCESS = "validationSuccess",
53-
EVENT_INPUT_IN_PROGRESS = "inputInProgress";
51+
var EVENT_INPUT_IGNORED = "inputIgnored",
52+
EVENT_VALIDATION_FAILED = "validationFailed",
53+
EVENT_VALIDATION_SUCCESS = "validationSuccess";
5454

5555
if( $.fn.restrictedTextField.types === undefined || $.fn.restrictedTextField.types === null ) {
5656
init();
@@ -111,36 +111,6 @@
111111
}
112112
}
113113

114-
function processFinishedInput( jqField, valueBeforeCommit ) {
115-
var val = jqField.val();
116-
117-
if( val.length === 0 ) {
118-
//console.log( "triggering success" );
119-
120-
jqField.trigger( EVENT_VALIDATION_SUCCESS );
121-
} else if( val.length > 0 ) {
122-
//console.log( "processFinishedInput - " + settings.type + ": " + regexes.fullRegex );
123-
124-
if( !regexes.fullRegex.test(val) ) {
125-
//console.log( "failed validation" );
126-
127-
if( settings.preventInvalidInput ) {
128-
//console.log( "reverting" );
129-
130-
jqField.val( valueBeforeCommit );
131-
}
132-
133-
//console.log( "triggering fail event" );
134-
135-
jqField.trigger( EVENT_VALIDATION_FAILURE );
136-
} else {
137-
//console.log( "triggering success" );
138-
139-
jqField.trigger( EVENT_VALIDATION_SUCCESS );
140-
}
141-
}
142-
}
143-
144114
return this.each( function() {
145115
var jqThis = $( this );
146116
var valueBeforeCommit = "";
@@ -152,26 +122,43 @@
152122
jqThis.on( "input", function() {
153123
var jqThis = $( this );
154124

155-
// The user is entering data, but has yet to reach the minimum number of characters needed to satisfy
156-
// the regular expression in regexes.fullRegex. We can't check against that yet because it would
157-
// result in the user being unable to enter anything. Until we've reached the minimum number of
158-
// required characters, allow the user to input any character which would satisfy the regular
159-
// expression. If we've reached the minimum required number of characters, perform the validation
160-
// against the regular expression in regexes.fullRegex.
125+
var passesPartialRegex = false,
126+
passesFullRegex = false;
127+
128+
var event = EVENT_VALIDATION_FAILED;
129+
130+
if( this.value.length === 0 ) {
131+
passesPartialRegex = true;
132+
passesFullRegex = true;
133+
event = EVENT_VALIDATION_SUCCESS;
134+
} else {
135+
passesFullRegex = regexes.fullRegex.test( this.value );
161136

162-
if( regexes.partialRegex !== undefined && regexes.partialRegex !== null ) {
163-
if( regexes.partialRegex.test(this.value) ) {
164-
jqThis.trigger( EVENT_INPUT_IN_PROGRESS );
137+
if( regexes.partialRegex !== undefined && regexes.partialRegex !== null ) {
138+
passesPartialRegex = regexes.partialRegex.test( this.value );
139+
}
140+
141+
if( passesFullRegex ) {
142+
event = EVENT_VALIDATION_SUCCESS;
143+
} else if( passesPartialRegex ) {
144+
event = EVENT_VALIDATION_SUCCESS;
165145
} else {
166-
processFinishedInput( jqThis, valueBeforeCommit );
146+
event = EVENT_VALIDATION_FAILED;
147+
}
148+
149+
if( !passesPartialRegex && !passesFullRegex ) {
150+
if( settings.preventInvalidInput ) {
151+
event = EVENT_INPUT_IGNORED;
152+
jqThis.val( valueBeforeCommit );
153+
}
167154
}
168-
} else {
169-
processFinishedInput( jqThis, valueBeforeCommit );
170155
}
156+
157+
jqThis.trigger( event );
171158
} );
172159

173160
jqThis.on( "blur", function() {
174-
processFinishedInput( jqThis, jqThis.val() );
161+
jqThis.trigger( this.value.length === 0 || regexes.fullRegex.test(this.value) ? EVENT_VALIDATION_SUCCESS : EVENT_VALIDATION_FAILED );
175162
} );
176163
} );
177164
};

‎jquery.restrictedtextfield.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)