Skip to content

Commit c4b87aa

Browse files
kloverdekloverde
committed
Release 1.4: Add support for the 'pattern' attribute
1 parent 6ea5f44 commit c4b87aa

21 files changed

+325
-109
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
# Release 1.4 (UPCOMING RELEASE)
2+
3+
* Added support for the HTML5 `pattern` attribute. Check [caniuse.com](http://caniuse.com/#search=pattern) for browser support.
4+
5+
16
# Release 1.3 (January 3, 2017)
27

38
* Added zip code types

‎README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1-
RestrictedTextField v1.3
1+
RestrictedTextField v1.4 (UPCOMING RELEASE)
22
========================
33

4+
# You've stumbled upon a development branch. Have a look around if you want, but only use code that's posted on the releases page.
5+
46
See LICENSE for this software's licensing terms.
57

68
RestrictedTextField is a jQuery plugin which uses regular expressions to validate and control input to HTML text fields. Using 38 built-in types or types you define yourself, it allows you to suppress invalid keystrokes or to allow them into the field but be flagged incorrect. Validation is performed on keystroke, paste and blur.
@@ -11,6 +13,7 @@ RestrictedTextField is a jQuery plugin which uses regular expressions to validat
1113
* Discard invalid keystrokes or catch a validation failure event to handle it as you wish
1214
* Has 38 built-in types
1315
* Extensible: define your own types
16+
* Supports (but does not rely on) the HTML 5 `pattern` attribute - can be enabled during initialization
1417
* Money types automatically format on blur to end in a decimal point and two digits
1518

1619

@@ -93,6 +96,7 @@ If you prefer not to use strictly-enforced credit card types (is Wikipedia corre
9396
| `type` | Text field type. This is a required setting. | string | alpha, upperAlpha, lowerAlpha, alphaSpace, upperAlphaSpace, lowerAlphaSpace, alphanumeric, upperAlphanumeric, lowerAlphanumeric, alphanumericSpace, upperAlphanumericSpace, lowerAlphanumericSpace, int, positiveInt, negativeInt, strictInt, strictPositiveInt, strictNegativeInt, float, positiveFloat, negativeFloat, strictFloat, strictPositiveFloat, strictNegativeFloat, money, positiveMoney, negativeMoney, accountingMoney, negativeAccountingMoney, americanExpress, visa, masterCard, discover, creditCard, luhnNumber, usZip, usZip5, usZipSuffix | null |
9497
| `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 |
9598
| `logger` | An optional callback function for logging. If you want to enable logging, provide a function and then do whatever you wish with the message. | function | A function accepting the log message as a string argument | undefined |
99+
| `usePatternAttr` | When enabled, sets the HTML5 `pattern` attribute on the input field. Check [caniuse.com](http://caniuse.com/#search=pattern) for browser support. | boolean | true/false | false |
96100

97101

98102
## Events

‎demo/demo.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
#instructions {
2+
min-width: 45%;
3+
max-width: 75%;
4+
}
5+
16
#fieldDemo{
27
display: table;
38
}
@@ -18,3 +23,7 @@ input.inputIgnored {
1823
input.invalid {
1924
border: 2px solid #FF0000;
2025
}
26+
27+
input[type=submit] {
28+
margin-left: 5px;
29+
}

‎demo/demo.html‎

Lines changed: 60 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,71 @@
11
<!DOCTYPE html>
22

3-
<!--
4-
RestrictedTextField
5-
https://www.github.com/kloverde/jquery-RestrictedTextField
6-
7-
Copyright (c) 2016, Kurtis LoVerde
8-
All rights reserved.
9-
10-
Donations: https://paypal.me/KurtisLoVerde/10
11-
12-
Redistribution and use in source and binary forms, with or without
13-
modification, are permitted provided that the following conditions are met:
14-
15-
1. Redistributions of source code must retain the above copyright
16-
notice, this list of conditions and the following disclaimer.
17-
2. Redistributions in binary form must reproduce the above copyright
18-
notice, this list of conditions and the following disclaimer in the
19-
documentation and/or other materials provided with the distribution.
20-
3. Neither the name of the copyright holder nor the names of its
21-
contributors may be used to endorse or promote products derived from
22-
this software without specific prior written permission.
23-
24-
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
25-
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
26-
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
27-
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
28-
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
29-
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
30-
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
31-
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
32-
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
33-
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
34-
-->
35-
363
<html lang="en-US">
374
<head>
385
<meta charset="UTF-8"/>
396

7+
<!--
8+
RestrictedTextField
9+
https://www.github.com/kloverde/jquery-RestrictedTextField
10+
11+
Copyright (c) 2016, Kurtis LoVerde
12+
All rights reserved.
13+
14+
Donations: https://paypal.me/KurtisLoVerde/10
15+
16+
Redistribution and use in source and binary forms, with or without
17+
modification, are permitted provided that the following conditions are met:
18+
19+
1. Redistributions of source code must retain the above copyright
20+
notice, this list of conditions and the following disclaimer.
21+
2. Redistributions in binary form must reproduce the above copyright
22+
notice, this list of conditions and the following disclaimer in the
23+
documentation and/or other materials provided with the distribution.
24+
3. Neither the name of the copyright holder nor the names of its
25+
contributors may be used to endorse or promote products derived from
26+
this software without specific prior written permission.
27+
28+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
29+
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
30+
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
31+
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
32+
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
33+
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
34+
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
35+
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
36+
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
37+
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
38+
-->
39+
4040
<title>RestrictedTextField Demo</title>
4141

4242
<link rel="stylesheet" href="demo.css"/>
4343

44-
<script type="text/javascript" src="../test/qunit/dep/jquery.js"></script>
45-
<script type="text/javascript" src="../test/qunit/js/types/FieldType.js"></script>
44+
<script type="text/javascript" src="../test/dep/jquery.js"></script>
45+
<script type="text/javascript" src="../test/js/types/FieldType.js"></script>
4646
<script type="text/javascript" src="../src/jquery.restrictedtextfield.js"></script>
4747
<script type="text/javascript" src="demo.js"></script>
4848
</head>
4949

5050
<body>
5151
<h1>Test Drive</h1>
52-
<p>
53-
This section allows you to test drive RestrictedTextField's built-in types.<br/>
54-
Select a type from the dropdown menu and use the checkbox to control whether invalid keystrokes are discarded.<br/>
55-
Regardless of the checkbox state, validation is always performed on each keystroke and on blur.
56-
</p>
5752

58-
<p>
59-
This demo has event listeners that flash the text field's border when a keystroke is discarded, and colors its<br/>
60-
border solid red if it contains an invalid character. The demo initializes RestrictedTextField with a logging<br/>
61-
function, so you can open your browser's console to view events in real time.
62-
</p>
53+
<div id="instructions">
54+
<p>Here you can test drive RestrictedTextField's built-in types. Select a type from the dropdown menu and use the checkboxes to further customize the configuration.</p>
55+
56+
<p>Regardless of the state of the &quot;Discard invalid keystrokes&quot; checkbox, validation is always performed on each keystroke and on blur.</p>
57+
58+
<p>This demo declares event listeners that flash the text field's border when a keystroke is discarded, and colors its border solid red if an invalid character is allowed into the field.</p>
59+
60+
<p>
61+
To better demonstrate the support of the <a href="http://caniuse.com/#search=pattern" target="_blank">pattern</a> attribute, the event listener which watches for invalid text
62+
inside the field will be disabled when the pattern attribute is in use. You'll notice that with the pattern attribute, the browser's built-in behavior alters the field's border
63+
color, but only on blur. Notice how this differs from RestrictedTextField's approach when the pattern attribute isn't turned on. Note: for types which require validation beyond
64+
a regular expression (for example, a credit card number), the pattern attribute won't provide complete validation; you'll want to heed RestrictedTextField's validation events.
65+
</p>
66+
67+
<p>The demo initializes RestrictedTextField with a logging function, so you can open your browser's console to view events in real time.</p>
68+
</div>
6369

6470
<div id="fieldDemo">
6571
<div id="criteria" class="cell">
@@ -69,11 +75,13 @@ <h1>Test Drive</h1>
6975

7076
<br/><br/>
7177

72-
<input type="checkbox" id="preventInvalid"/> Discard invalid keystrokes
78+
<input type="checkbox" id="preventInvalid"/> Discard invalid keystrokes<br/>
79+
<input type="checkbox" id="usePatternAttr"/> Use pattern attribute
7380
</div>
7481

75-
<div id="fieldContainer" class="cell">
76-
</div>
82+
<form id="form" action="submitted.html">
83+
<div id="fieldContainer" class="cell"></div>
84+
</form>
7785

7886
<div id="code" class="cell"></div>
7987
</div>
@@ -103,10 +111,9 @@ <h1>Creating Your Own Types</h1>
103111
<h3>Simple type: vowels</h3>
104112
<p>Create a type which restricts input to the characters a, e, i, o and u.</p>
105113
<p>
106-
This is a simple type: the presence of a character
107-
at position X does not require a character to be present at position X + Y. Therefore, any value in the text field could be
108-
regarded as the complete input. For this reason, we provide a regular expression for <code>fullRegex</code> and no value for
109-
<code>partialRegex</code>.
114+
This is a simple type: the presence of a character at position X does not require a character to be present at position X + Y.
115+
Therefore, any value in the text field could be regarded as the complete input. For this reason, we provide a regular
116+
expression for <code>fullRegex</code> and no value for <code>partialRegex</code>.
110117
</p>
111118
<p>
112119
<code>
@@ -147,6 +154,6 @@ <h1>Donations</h1>
147154
support. Your support is greatly appreciated, and it motivates me to keep this project alive and to release
148155
more open source software.
149156
</p>
150-
<a href="https://paypal.me/KurtisLoVerde/10" target="new">https://paypal.me/KurtisLoVerde/10</a>
157+
<a href="https://paypal.me/KurtisLoVerde/10" target="_blank">https://paypal.me/KurtisLoVerde/10</a>
151158
</body>
152159
</html>

‎demo/demo.js‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,10 @@
2929
}
3030
} );
3131

32-
$( "#preventInvalid" ).on( "change", function() {
33-
createField();
32+
$( "#preventInvalid, #usePatternAttr" ).on( "change", function() {
33+
if( dropdown.value !== "Select Type" ) {
34+
createField();
35+
}
3436
} );
3537

3638
createCustomTypes();
@@ -39,20 +41,37 @@
3941
function createField() {
4042
var fieldType = document.getElementById( "fieldTypes" ).value;
4143
var preventInvalid = $( "#preventInvalid" ).is( ":checked" );
44+
var usePatternAttr = $( "#usePatternAttr" ).is( ":checked" );
4245
var fieldContainer = document.getElementById( "fieldContainer" );
4346
var field = document.createElement( "input" );
47+
var submit = document.createElement( "input" );
4448

4549
field.type = "text";
4650
field.id = "field";
51+
field.title = descrMap[ fieldType ];
52+
53+
submit.type = "submit";
54+
submit.value = "Submit";
4755

4856
fieldContainer.innerHTML = descrMap[fieldType] + "<br/><br/>";
4957
fieldContainer.appendChild( field );
58+
fieldContainer.appendChild( submit );
59+
60+
if( !usePatternAttr ) {
61+
$( submit ).on( "click", function(event) {
62+
if( $("#field").hasClass("invalid") ) {
63+
event.preventDefault();
64+
alert( "Fix the validation error first" );
65+
}
66+
} );
67+
}
5068

5169
field = $( field );
5270

5371
field.restrictedTextField( {
5472
type : fieldType,
5573
preventInvalidInput : preventInvalid,
74+
usePatternAttr : usePatternAttr,
5675
logger : log
5776
} );
5877

@@ -65,10 +84,11 @@
6584
flashBorder( jqThis, "inputIgnored", 3, 150 );
6685
} )
6786
.on( "validationFailed", function(event) {
68-
var jqThis = $( this );
69-
70-
jqThis.removeClass( "inputIgnored" );
71-
jqThis.addClass( "invalid" );
87+
if( !usePatternAttr ) {
88+
var jqThis = $( this );
89+
jqThis.removeClass( "inputIgnored" );
90+
jqThis.addClass( "invalid" );
91+
}
7292
} )
7393
.on( "validationSuccess", function(event) {
7494
var jqThis = $( this );
@@ -82,6 +102,7 @@
82102
"$( \"#field\" ).restrictedTextField( {<br/>\n" +
83103
"&nbsp;&nbsp;&nbsp;type : \"" + fieldType + "\",<br/>\n" +
84104
"&nbsp;&nbsp;&nbsp;preventInvalidInput : " + preventInvalid + ",<br/>\n" +
105+
"&nbsp;&nbsp;&nbsp;usePatternAttr : " + usePatternAttr + ",<br/>\n" +
85106
"&nbsp;&nbsp;&nbsp;logger : log<br/>\n" +
86107
"} );<br/>\n" +
87108
"</code>\n"

0 commit comments

Comments
 (0)