Permalink
Browse files

Upgraded stylesheet. Fixed method signatures.

  • Loading branch information...
1 parent c0032e3 commit 1223874863e16d98e6dd324fe363e78fc057ed90 Eric Hamilton committed Apr 4, 2011
Showing with 246 additions and 155 deletions.
  1. BIN img/background.png
  2. +11 −94 index.html
  3. +43 −61 jquery.h5validate.js
  4. +192 −0 style01.css
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -7,91 +7,9 @@
Exceptional.setKey('e778cbe66170d28dc9233629cec1edba8c98113a');
</script>
-->
- <style type="text/css">
- body {
- width:960px;
- margin:0 auto;
- font-size:14pt;
- }
- label {
- font-weight:bold;
- margin-right:1em;
- }
- h1 {
- font-size: 2.5em;
- }
- h2 {
- font-size:2em;
- margin-top:2em;
- }
- dt {
- font-weight:bold;
- font-family:monospace;
- line-height:100%;
- }
- .ui-state-error {
- background-color:#BB1100;
- color:white;
- }
- .block {
- display:block;
- margin:1em;
- }
- #form4 input, label {
- float:left;
- }
- .message {
- margin-left:1em;
- width:20em;
- border:1px;
- padding:2px;
- float:left;
- font-size:10pt;
- }
- .black {
- background-color:#111111;
- color:silver;
- }
-.button {
- border-top: 1px solid #96d1f8;
- background: #65a9d7;
- background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
- background: -moz-linear-gradient(top, #3e779d, #65a9d7);
- padding: 13.5px 27px;
- -webkit-border-radius: 17px;
- -moz-border-radius: 17px;
- border-radius: 17px;
- -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
- -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
- box-shadow: rgba(0,0,0,1) 0 1px 0;
- text-shadow: rgba(0,0,0,.4) 0 1px 0;
- color: white;
- font-size: 24px;
- font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
- text-decoration: none;
- vertical-align: middle;
- margin-bottom:2em;
- }
-.button:hover {
- border-top-color: #28597a;
- background: #28597a;
- color: #ccc;
- }
-.button:active {
- border-top-color: #1b435e;
- background: #1b435e;
- }
-.announce {
- border-left: 1px solid #afafaf;
- background-color: #ffefff;
- color: black;
- margin-left: 3em;
- padding-top:.1em;
- padding-bottom: .1em;
- padding-left: 1em;
- padding-right: 1em;
-}
- </style>
+
+ <link href="style01.css" media="screen" rel="stylesheet" type="text/css" />
+
<script type="text/javascript">
var _gaq = _gaq || [];
@@ -121,18 +39,17 @@
<p>Best practice realtime HTML5 form validation for jQuery. Works on all popular browsers, including old ones like IE6.</p>
<ul>
- <li>Regularly tested on 13 different browsers, IE6 - IE9, FireFox, Chrome, iPhone, and Android.</li>
- <li>Implements best practices based on 1,000 user survey, several usability studies, and the behavior of millions of users in live production environments.</li>
+ <li><p>Regularly tested on 13 different browsers, IE6 - IE9, FireFox, Chrome, iPhone, and Android.</p></li>
+ <li><p>Implements best practices based on 1,000 user survey, several usability studies, and the behavior of millions of users in live production environments.</p></li>
</ul>
</header>
<div class="announce">
- <p><h3>Important update: A known cross-browser issue was resolved in v0.3.3:</h3></p>
- <p>The required attribute was not being handled properly in some (non-webkit) browsers, including IE and Firefox.</p>
- <p>If you are using a version older than 0.3.3, an upgrade is highly recommended.</p>
- <p><strong>Verified support:</strong> IE 9, 8, 7, 6, Chrome, Firefox, Safari, and Opera. Tested on Windows 7 and Mac.</p>
- <p><strong>Verified mobile support:</strong> iPhone, Android, Palm WebOS</p>
- <p>Many thanks to ajpiano on Freenode #jquery for helpful suggestions.</p>
+ <h3>Supported Platforms</h3>
+ <p><strong>Desktop:</strong> IE 9, 8, 7, 6, Chrome, Firefox, Safari, and Opera. Tested on Windows 7 and Mac.</p>
+ <p><strong>Mobile:</strong> iPhone, Android, Palm WebOS</p>
+ <h3>New in v0.5.2+</h3>
+ <ul><li>Override native browser behavior.</li></ul>
</div>
<h2>Jump Start</h2>
@@ -149,7 +66,7 @@
<label for="name">Your Name:*</label>
<input id="name" name="name" type="text" placeholder="Bob" title="Your name is required." required />
<p><em>Hint: Select it, then click somewhere else without typing anything.</em></p>
- <button type="submit">Submit</button>
+ <input type="submit" value="Submit" />
</form>
<h4>Source:</h4>
View
@@ -1,6 +1,6 @@
/**
* h5Validate
- * @version v0.5.0
+ * @version v0.5.2
* Using semantic versioning: http://semver.org/
* @author Eric Hamilton dilvie@dilvie.com
* @copyright 2010 Eric Hamilton
@@ -34,7 +34,7 @@
// Date in ISO format. Credit: bassistance
dateISO: /\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}/,
-
+
alpha: /[a-zA-Z]+/,
alphaNumeric: /\w+/,
integer: /-?\d+/
@@ -67,7 +67,7 @@
// Setup mouse event delegation.
mSelectors: ':radio, :checkbox, select, option',
click: true,
-
+
activeKeyup: true,
// What do we name the required .data variable?
@@ -130,38 +130,58 @@
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),
- re = $this.data(settings.patternVar),
+ 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 + ')$'),
value = $this.val(),
errorClass = settings.errorClass,
validClass = settings.validClass,
errorIDbare = $this.attr(settings.errorAttribute) || false, // Get the ID of the error element.
errorID = errorIDbare ? '#' + errorIDbare : false, // Add the hash for convenience. This is done in two steps to avoid two attribute lookups.
- required = $this.data(settings.requiredVar),
+ required = false,
isValid = true,
- reason = '';
+ reason = '',
+ $checkRequired = $('<input required>');
+
+ /* If the required attribute exists, set it required to true, unless it's set 'false'.
+ * This is a minor deviation from the spec, but it seems some browsers have falsey
+ * required values if the attribute is empty (should be true). The more conformant
+ * version of this failed sanity checking in the browser environment.
+ * This plugin is meant to be practical, not ideologically married to the spec.
+ */
+ // Feature fork
+ if ($checkRequired.filter('[required]') && $checkRequired.filter('[required]').length) {
+ required = ($this.filter('[required]').length && $this.attr('required') !== 'false') ? true : false;
+ } else {
+ required = ($this.attr('required') !== undefined) ? true : false;
+ }
if (settings.debug && window.console) {
console.log('Validate called on "' + value + '" with regex "' + re + '". Required: ' + required); // **DEBUG
- if (re) {
- console.log('Regex test: ' + re.test(value) + ', Regex: ' + re); // **DEBUG
- }
+ console.log('Regex test: ' + re.test(value) + ', Pattern: ' + pattern); // **DEBUG
}
if (required && !value) {
isValid = false;
reason = 'required';
- } else if (re && !re.test(value) && value) {
+ } else if (pattern && !re.test(value) && value) {
isValid = false;
reason = 'pattern';
} else {
isValid = true;
settings.markValid({
element: this,
- errorClass: errorClass,
- validClass: validClass,
- errorID: errorID
+ errorClass: errorClass,
+ validClass: validClass,
+ errorID: errorID,
+ settings: settings
});
+
}
if (!isValid) {
@@ -214,13 +234,18 @@
bindDelegation: function (settings) {
// Attach patterns from the library to elements.
$.each(patternLibrary, function (key, value) {
- // ** TODO: Inline patterns should take precedence over the patternLibrary.
- var pattern = value.toString(),
- re;
+ var pattern = value.toString();
pattern = pattern.substring(1, pattern.length-1);
- re = new RegExp('^(?:' + pattern + ')$');
- $('.' + settings.classPrefix + key).data(settings.patternVar, re);
+ if (settings.debug && window.console) {
+ console.log('.' + settings.classPrefix + key + ' : ' + pattern);
+ }
+ $('.' + settings.classPrefix + key).attr('pattern', pattern);
});
+
+ $(this).filter('form').attr('novalidate', 'novalidate');
+ $(this).find('form').attr('novalidate', 'novalidate');
+ $(this).parents('form').attr('novalidate', 'novalidate');
+
return this.each(function () {
var kbEvents = {
focusout: settings.focusout,
@@ -285,46 +310,6 @@
}
re = new RegExp('^(?:' + pattern + ')$');
$(selector).data('regex', re);
- },
- getRules: function (options) {
- var $checkRequired = $('<input required>').filter('[required]'),
- $container = (options.container) ? $(options.container) : $(this),
- requiredAttribute = options.requiredAttribute,
- patternAttribute = options.patternAttribute;
-
- $container.find('input, textarea, select').each(function () {
- var $this = $(this),
- required;
-
- if ($checkRequired && $checkRequired.length) {
- required = !!($this.filter('[' + requiredAttribute + ']').length && $this.attr(requiredAttribute) !== 'false');
- } else {
- required = !!($this.attr(requiredAttribute) !== undefined);
- }
-
- if ((required || required === false) && !$this.data(options.requiredVar)) {
- $this.addClass(options.requiredClass).data(options.requiredVar, required);
- }
-
- $this.filter('[' + patternAttribute + ']').each(function () {
- var $this = $(this),
- pattern = $this.attr(patternAttribute),
- // 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 + ')$');
-
- if (pattern && !$this.data(options.patternVar)) {
- $this.data(options.patternVar, re);
- }
- return $this;
- });
-
- if (options.stripMarkup) {
- $this.removeAttr(patternAttribute).removeAttr(requiredAttribute);
- }
-
- return $this;
- });
}
};
@@ -344,9 +329,6 @@
// Expose public API.
$.extend($.fn.h5Validate, h5);
- // Override defaults
- $.h5Validate.getRules.call(this, settings);
-
// Returning the jQuery object allows for method chaining.
return methods.bindDelegation.call(this, settings);
};
Oops, something went wrong.

0 comments on commit 1223874

Please sign in to comment.