Permalink
Browse files

New feature: validValues() - Pass an element selector and an array of…

… valid values. Validation fails if user input does not match one of the supplied values. Alse cleaned up repo.
  • Loading branch information...
Eric Hamilton
Eric Hamilton committed Nov 3, 2010
1 parent 47c104f commit 0456b32ecc38e03dcd8870165706edb8363041d2
Showing with 56 additions and 66 deletions.
  1. +2 −32 README.markdown
  2. BIN h5Validate-0.2.1.zip
  3. +1 −1 index.html
  4. +53 −33 {lib → }/jquery.h5validate.js
View
@@ -1,37 +1,7 @@
-# h5Validate
+# <a href="http://ericleads.com/h5validate">h5Validate</a>
A jQuery plugin that understands HTML5 forms and knows how to validate them, even in browsers that don't yet support HTML5.
In browsers that do support HTML5, h5Validate adds some much-needed features, such as the ability to customize the user interface when an input fails validation.
-## Jump Start
-
- <script src="lib/jquery/jquery-1.4.2.min.js"></script>
- <script src="lib/jquery.h5validate.js"></script>
-
- <script>
- $(document).ready(function() {
- $('form').h5Validate();
- });
- </script>
-
-
-## Features
-
-* Automatically bind validation events to input fields.
-
-* Supports the new HTML5 required attribute:
-
- <div><label for="firstName">First Name</label>
- <input id="firstName" name="firstName" type="text" placeholder="Your First Name" title="Your first name must contain at least one letter." required /></div>
-
-* Supports the new HTML5 pattern attribute:
-
- <div><label for="firstName">First Name</label>
- <input id="firstName" name="firstName" type="text" placeholder="Your First Name" title="Your first name must contain at least one letter." pattern="jQuery" /></div>
-
-* Uses jQuery UI's ui-state-error class by default, so if you have jQuery UI CSS hooked up, you don't have to add your own error classes to the CSS.
-
-* Flexible public API lets you override just about every aspect of the script's behavior. Customize error class, event bindings, callback functions, extend the callback library, etc... e.g.
-
- $('form').h5Validate({errorClass: 'ui-state-error'});
+For demo and usage, see <a href="http://ericleads.com/h5validate">the h5Validate homepage</a>.
View
Binary file not shown.
View
@@ -202,7 +202,7 @@ <h3>Coming soon!</h3>
</dl>
<script src="lib/jquery/jquery-1.4.2.min.js"></script>
- <script src="lib/jquery.h5validate.js"></script>
+ <script src="jquery.h5validate.js"></script>
<script>
$(document).ready(function() {
View
@@ -1,6 +1,6 @@
/**
* h5Validate
- * @version v0.2.1
+ * @version v0.3.1
* Using semantic versioning: http://semver.org/
* @author Eric Hamilton dilvie@dilvie.com
* @copyright 2010 Eric Hamilton
@@ -47,25 +47,25 @@
// The prefix to use to trigger pattern-library validation.
classPrefix: 'h5-',
-
+
// Attribute which stores the ID of the error container element (without the hash).
errorAttribute: 'data-errorID',
-
+
// Setup KB event delegation.
kbSelectors: ':text, :password, select, textarea',
focusout: true,
focusin: false,
change: false,
keyup: true,
-
+
// Setup mouse event delegation.
mSelectors: ':radio, :checkbox, select, option',
click: true,
-
+
// Validate on submit?
// **TODO: This isn't implemented, yet.
submit: true,
-
+
// Mark field invalid.
// ** TODO: Highlight labels
// ** TODO: Implement setCustomValidity as per the spec:
@@ -74,20 +74,20 @@
var $element = $(element),
$errorID = $(errorID);
$element.addClass(errorClass).removeClass(validClass);
- $element.form.find("#" + element.id).addClass(errorClass);
+ $element.find("#" + element.id).addClass(errorClass);
if ($errorID) {
$errorID.show();
}
return $element;
},
-
+
// Mark field valid.
markValid: function (element, errorClass, validClass, errorID) {
var $element = $(element);
$element.addClass(validClass).removeClass(errorClass);
return $element;
},
-
+
// Unmark field
unmark: function (element, errorClass, validClass, errorID) {
var $element = $(element);
@@ -101,14 +101,14 @@
defaults = h5.defaults,
messages = defaults.messages,
patternLibrary = defaults.patternLibrary,
-
+
methods = {
validate: function (settings) {
// Get the HTML5 pattern attribute if it exists.
// ** TODO: If a pattern class exists, grab the pattern from the patternLibrary, but the pattern attrib should override that value.
var $this = $(this),
pattern = $this.filter('[pattern]')[0] ? $this.attr('pattern') : false,
-
+
// The pattern attribute must match the whole value, not just a subset:
// "...as if it implied a ^(?: at the start of the pattern and a )$ at the end."
re = new RegExp('^(?:' + pattern + ')$'),
@@ -128,7 +128,7 @@
console.log('Validate called on "' + value + '" with regex "' + re + '". Required: ' + required); // **DEBUG
console.log('Regex test: ' + re.test(value) + ', Pattern: ' + pattern); // **DEBUG
}
-
+
if (required && !value) {
settings.markInvalid(this, 'required', errorClass, validClass, errorID);
} else if (pattern && !re.test(value) && value) {
@@ -204,30 +204,50 @@
};
$.h5Validate = {
- /**
- * Take a map of pattern names and HTML5-compatible regular
- * expressions, and add them to the patternLibrary. Patterns in
- * the library are automatically assigned to HTML element pattern
- * attributes for validation.
- *
- * @param {object} patterns A map of pattern names and HTML5 compatible
- * regular expressions.
- *
- * @returns {object} this
- */
- addPatterns : function (patterns) {
- var patternLibrary = defaults.patternLibrary,
- key;
- for (key in patterns) {
- if (patterns.hasOwnProperty(key)) {
- patternLibrary[key] = patterns[key];
- if (defaults.debug && window.console) {
- console.log(patternLibrary[key]);
- }
+ /**
+ * Take a map of pattern names and HTML5-compatible regular
+ * expressions, and add them to the patternLibrary. Patterns in
+ * the library are automatically assigned to HTML element pattern
+ * attributes for validation.
+ *
+ * @param {Object} patterns A map of pattern names and HTML5 compatible
+ * regular expressions.
+ *
+ * @returns {Object} this
+ */
+ addPatterns : function (patterns) {
+ var patternLibrary = defaults.patternLibrary,
+ key;
+ for (key in patterns) {
+ if (patterns.hasOwnProperty(key)) {
+ patternLibrary[key] = patterns[key];
+ if (defaults.debug && window.console) {
+ console.log(patternLibrary[key]);
}
}
- return this;
}
+ return this;
+ },
+ /**
+ * Take a valid jQuery selector, and a list of valid values to
+ * validate against.
+ * If the user input isn't in the list, validation fails.
+ *
+ * @param {String} selector Any valid jQuery selector.
+ *
+ * @param {Array} values A list of valid values to validate selected
+ * fields against.
+ */
+ validValues : function (selector, values) {
+ var i = 0,
+ ln = values.length,
+ pattern = '';
+ // Build regex pattern
+ for (i = 0; i < ln; i++) {
+ pattern = pattern ? pattern + '|' + values[i] : values[i];
+ }
+ $(selector).attr('pattern', pattern);
+ }
};
$.fn.h5Validate = function (options) {

0 comments on commit 0456b32

Please sign in to comment.