From 88d89f82b0bb006b9e95a0b263ced455f4552df0 Mon Sep 17 00:00:00 2001 From: Christian Lent Date: Thu, 13 Mar 2014 11:37:52 -0400 Subject: [PATCH 1/5] Per-selector external validation --- jquery.h5validate.js | 37 +++++++++++++++++++++++++++++++++ test/index.html | 8 +++++++ test/test.h5validate.js | 46 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 91 insertions(+) diff --git a/jquery.h5validate.js b/jquery.h5validate.js index b151b06..0069ca9 100644 --- a/jquery.h5validate.js +++ b/jquery.h5validate.js @@ -92,6 +92,9 @@ // Callback stubs invalidCallback: function () {}, validCallback: function () {}, + + // Array of External Validator Functions. View the comment for addExternalValidator for more information. + externalValidators: [], // Elements to validate with allValid (only validating visible elements) allValidSelectors: ':input:visible:not(:button):not(:disabled):not(.novalidate)', @@ -280,6 +283,19 @@ validity.valid = false; validity.tooLong = true; } + + // Iterate through the external validators. If any fail, the field fails. + for (var i = 0;iBypassing Validation tests (via 'formnovalidate') + +
+

External Form Validation Tests

+
+ + +
+
diff --git a/test/test.h5validate.js b/test/test.h5validate.js index 8446eb4..a0b8a46 100644 --- a/test/test.h5validate.js +++ b/test/test.h5validate.js @@ -302,6 +302,52 @@ $form.empty().remove(); }); + test('Adding an external validator should fail for non functions',function () { + var result = $.h5Validate.addExternalValidator('[name="target-field"]',5); + equal(result, false, 'Should not be able to add an integer as an external validator.'); + + var result = $.h5Validate.addExternalValidator('[name="target-field"]','5'); + equal(result, false, 'Should not be able to add a string as an external validator.'); + + var result = $.h5Validate.addExternalValidator('[name="target-field"]',null); + equal(result, false, 'Should not be able to add a null as an external validator.'); + + var result = $.h5Validate.addExternalValidator('[name="target-field"]',{}); + equal(result, false, 'Should not be able to add an object as an external validator.'); + + var result = $.h5Validate.addExternalValidator('[name="target-field"]',[]); + equal(result, false, 'Should not be able to add an array as an external validator.'); + }); + + test('Adding an external validator should succeed for functions',function () { + var result = $.h5Validate.addExternalValidator('[name="target-field"]',function(){return true;}); + equal(result, true, 'Should be able to add a function as an external validator.'); + }); + + test('Adding an external validator that returns true should not cause validation to fail.',function () { + var $form = $('#externalValidationForm'), + $field = $('#externalValidationFieldPass'); + $.h5Validate.addExternalValidator($field,function(){return true;}); + $form.h5Validate(); + equal($field.h5Validate('isValid'), true, 'Adding an external validator that returns true should not cause validation to fail.'); + }); + + test('Adding an external validator that returns false should cause validation to fail.',function () { + var $form = $('#externalValidationForm'), + $field = $('#externalValidationFieldFail'); + $.h5Validate.addExternalValidator($field,function(){return false;}); + $form.h5Validate(); + equal($field.h5Validate('isValid'), false, 'Adding an external validator that returns false should cause validation to fail.'); + }); + + test('Adding an external validator to a selector that does not exist should not cause validation to fail.',function () { + var $form = $('#externalValidationForm'); + $.h5Validate.addExternalValidator('atagthatdoesntexistinhtml',function(){return false;}); + $form.h5Validate(); + equal($form.h5Validate('allValid'), true, 'Adding an external validator to a selector that does not exist should not cause validation to fail.'); + }); + + } exports.runTests = runTests; }((typeof exports !== 'undefined') ? exports : window)); From 709dcbd79724cdafad6255640e5a3fafd0efe5c9 Mon Sep 17 00:00:00 2001 From: Christian Lent Date: Thu, 13 Mar 2014 11:55:38 -0400 Subject: [PATCH 2/5] Fixed some external validation tests and added a few more. Added "return" documentation for addExternalValidator --- jquery.h5validate.js | 3 ++- test/index.html | 5 +++++ test/test.h5validate.js | 40 +++++++++++++++++++++++++++++++++++++++- 3 files changed, 46 insertions(+), 2 deletions(-) diff --git a/jquery.h5validate.js b/jquery.h5validate.js index 0069ca9..8491450 100644 --- a/jquery.h5validate.js +++ b/jquery.h5validate.js @@ -550,8 +550,9 @@ * example: [name="target-field"] * @param {Function} validator - An external validator function with the following definition: * @param {String} value - The value of the input being validated. - * @return {Boolean} - the result of the validation (true = pass, false = fail) + * @return {Boolean} - The result of the validation (true = pass, false = fail). * @this {DOM Element} - The dom element being validated. + * @return {Boolean} - Whether the selector was added successfully */ addExternalValidator: function(selector, validator) { if (!$.isFunction(validator)) { diff --git a/test/index.html b/test/index.html index 6436592..9cf8c2c 100644 --- a/test/index.html +++ b/test/index.html @@ -265,6 +265,11 @@

External Form Validation Tests

+ + +
+
+
diff --git a/test/test.h5validate.js b/test/test.h5validate.js index a0b8a46..2f5d031 100644 --- a/test/test.h5validate.js +++ b/test/test.h5validate.js @@ -340,13 +340,51 @@ equal($field.h5Validate('isValid'), false, 'Adding an external validator that returns false should cause validation to fail.'); }); + test('Adding an external validator that confirms the value of the input should not cause validation to fail.',function () { + var $form = $('#externalValidationForm'), + $field = $('#externalValidationFieldExample'); + $.h5Validate.addExternalValidator($field,function(value){return value == 'example';}); + $form.h5Validate(); + equal($field.h5Validate('isValid'), true, 'Adding an external validator that confirms the value of the input should not cause validation to fail.'); + }); + + test('Adding an external validator that disconfirms the value of the input should cause validation to fail.',function () { + var $form = $('#externalValidationForm'), + $field = $('#externalValidationFieldNotExample'); + $.h5Validate.addExternalValidator($field,function(value){return value == 'example';}); + $form.h5Validate(); + equal($field.h5Validate('isValid'), false, 'Adding an external validator that disconfirms the value of the input should cause validation to fail.'); + }); + test('Adding an external validator to a selector that does not exist should not cause validation to fail.',function () { - var $form = $('#externalValidationForm'); + var $form = $('#externalValidationFormPass'); $.h5Validate.addExternalValidator('atagthatdoesntexistinhtml',function(){return false;}); $form.h5Validate(); equal($form.h5Validate('allValid'), true, 'Adding an external validator to a selector that does not exist should not cause validation to fail.'); }); + test('External validators should be passed the value of the DOM element.',function () { + var $form = $('#externalValidationForm'), + $field = $('#externalValidationFieldExample'); + $.h5Validate.addExternalValidator($field,function(value) { + equal(value, $field.val(), 'External validators should be passed the value of the DOM element.'); + return true; + }); + $form.h5Validate(); + $field.h5Validate('isValid'); + }); + + test('External validators should be run in the context of the DOM element of the target field.',function () { + var $form = $('#externalValidationForm'), + $field = $('#externalValidationFieldExample'); + $.h5Validate.addExternalValidator($field,function() { + equal(this, $field.get(0), 'External validators should be run in the context of the DOM element of the target field.'); + return true; + }); + $form.h5Validate(); + $field.h5Validate('isValid'); + }); + } exports.runTests = runTests; From e27e6ea86013f3a3e6ce5ac8768d82219409dd90 Mon Sep 17 00:00:00 2001 From: Christian Lent Date: Fri, 14 Mar 2014 12:19:26 -0400 Subject: [PATCH 3/5] Renamed addExternalValidator to addValidator Added an "options" parameter for custom validators Added an option "name" for custom validators to identify which validator caused a fail Adding a non-function as a validator now causes an exception --- jquery.h5validate.js | 18 ++-- test/index.html | 2 + test/test.h5validate.js | 178 ++++++++++++++++++++++++---------------- 3 files changed, 120 insertions(+), 78 deletions(-) diff --git a/jquery.h5validate.js b/jquery.h5validate.js index 8491450..566b667 100644 --- a/jquery.h5validate.js +++ b/jquery.h5validate.js @@ -93,7 +93,7 @@ invalidCallback: function () {}, validCallback: function () {}, - // Array of External Validator Functions. View the comment for addExternalValidator for more information. + // Array of External Validator Functions. View the comment for addValidator for more information. externalValidators: [], // Elements to validate with allValid (only validating visible elements) @@ -288,11 +288,15 @@ for (var i = 0;iExternal Form Validation Tests + +
diff --git a/test/test.h5validate.js b/test/test.h5validate.js index 2f5d031..eb3b553 100644 --- a/test/test.h5validate.js +++ b/test/test.h5validate.js @@ -302,89 +302,127 @@ $form.empty().remove(); }); - test('Adding an external validator should fail for non functions',function () { - var result = $.h5Validate.addExternalValidator('[name="target-field"]',5); - equal(result, false, 'Should not be able to add an integer as an external validator.'); - - var result = $.h5Validate.addExternalValidator('[name="target-field"]','5'); - equal(result, false, 'Should not be able to add a string as an external validator.'); - - var result = $.h5Validate.addExternalValidator('[name="target-field"]',null); - equal(result, false, 'Should not be able to add a null as an external validator.'); + test('Adding an external validator should fail for non functions',function () { + raises(function() { + $.h5Validate.addValidator('[name="target-field"]',5); + }, Error, 'Should not be able to add an integer as an external validator.'); + + raises(function() { + $.h5Validate.addValidator('[name="target-field"]','5'); + }, Error, 'Should not be able to add a string as an external validator.'); + + raises(function() { + $.h5Validate.addValidator('[name="target-field"]',null); + }, Error, 'Should not be able to add a null as an external validator.'); + + raises(function() { + $.h5Validate.addValidator('[name="target-field"]',{}); + }, Error, 'Should not be able to add an object as an external validator.'); + + raises(function() { + $.h5Validate.addValidator('[name="target-field"]',[]); + }, Error, 'Should not be able to add an array as an external validator.'); + }); - var result = $.h5Validate.addExternalValidator('[name="target-field"]',{}); - equal(result, false, 'Should not be able to add an object as an external validator.'); + test('Adding an external validator should succeed for functions',function () { + $.h5Validate.addValidator('[name="target-field"]',function(){return true;}); + ok(true, 'Should be able to add a function as an external validator without causing an exception.'); + }); - var result = $.h5Validate.addExternalValidator('[name="target-field"]',[]); - equal(result, false, 'Should not be able to add an array as an external validator.'); - }); + test('Adding an external validator that returns true should not cause validation to fail.',function () { + var $form = $('#externalValidationForm'), + $field = $('#externalValidationFieldPass'); + $.h5Validate.addValidator($field,function(){return true;}); + $form.h5Validate(); + equal($field.h5Validate('isValid'), true, 'Adding an external validator that returns true should not cause validation to fail.'); + }); - test('Adding an external validator should succeed for functions',function () { - var result = $.h5Validate.addExternalValidator('[name="target-field"]',function(){return true;}); - equal(result, true, 'Should be able to add a function as an external validator.'); - }); + test('Adding an external validator that returns false should cause validation to fail.',function () { + var $form = $('#externalValidationForm'), + $field = $('#externalValidationFieldFail'); + $.h5Validate.addValidator($field,function(){return false;}); + $form.h5Validate(); + equal($field.h5Validate('isValid'), false, 'Adding an external validator that returns false should cause validation to fail.'); + }); - test('Adding an external validator that returns true should not cause validation to fail.',function () { - var $form = $('#externalValidationForm'), - $field = $('#externalValidationFieldPass'); - $.h5Validate.addExternalValidator($field,function(){return true;}); - $form.h5Validate(); - equal($field.h5Validate('isValid'), true, 'Adding an external validator that returns true should not cause validation to fail.'); - }); + test('Adding an external validator that confirms the value of the input should not cause validation to fail.',function () { + var $form = $('#externalValidationForm'), + $field = $('#externalValidationFieldExample'); + $.h5Validate.addValidator($field,function(value){return value == 'example';}); + $form.h5Validate(); + equal($field.h5Validate('isValid'), true, 'Adding an external validator that confirms the value of the input should not cause validation to fail.'); + }); - test('Adding an external validator that returns false should cause validation to fail.',function () { - var $form = $('#externalValidationForm'), - $field = $('#externalValidationFieldFail'); - $.h5Validate.addExternalValidator($field,function(){return false;}); - $form.h5Validate(); - equal($field.h5Validate('isValid'), false, 'Adding an external validator that returns false should cause validation to fail.'); - }); + test('Adding an external validator that disconfirms the value of the input should cause validation to fail.',function () { + var $form = $('#externalValidationForm'), + $field = $('#externalValidationFieldNotExample'); + $.h5Validate.addValidator($field,function(value){return value == 'example';}); + $form.h5Validate(); + equal($field.h5Validate('isValid'), false, 'Adding an external validator that disconfirms the value of the input should cause validation to fail.'); + }); - test('Adding an external validator that confirms the value of the input should not cause validation to fail.',function () { - var $form = $('#externalValidationForm'), - $field = $('#externalValidationFieldExample'); - $.h5Validate.addExternalValidator($field,function(value){return value == 'example';}); - $form.h5Validate(); - equal($field.h5Validate('isValid'), true, 'Adding an external validator that confirms the value of the input should not cause validation to fail.'); - }); + test('Adding an external validator to a selector that does not exist should not cause validation to fail.',function () { + var $form = $('#externalValidationFormPass'); + $.h5Validate.addValidator('atagthatdoesntexistinhtml',function(){return false;}); + $form.h5Validate(); + equal($form.h5Validate('allValid'), true, 'Adding an external validator to a selector that does not exist should not cause validation to fail.'); + }); - test('Adding an external validator that disconfirms the value of the input should cause validation to fail.',function () { - var $form = $('#externalValidationForm'), - $field = $('#externalValidationFieldNotExample'); - $.h5Validate.addExternalValidator($field,function(value){return value == 'example';}); - $form.h5Validate(); - equal($field.h5Validate('isValid'), false, 'Adding an external validator that disconfirms the value of the input should cause validation to fail.'); - }); + test('External validators should be passed the value of the DOM element.',function () { + var $form = $('#externalValidationForm'), + $field = $('#externalValidationFieldExample'); + $.h5Validate.addValidator($field,function(value) { + equal(value, $field.val(), 'External validators should be passed the value of the DOM element.'); + return true; + }); + $form.h5Validate(); + $field.h5Validate('isValid'); + }); - test('Adding an external validator to a selector that does not exist should not cause validation to fail.',function () { - var $form = $('#externalValidationFormPass'); - $.h5Validate.addExternalValidator('atagthatdoesntexistinhtml',function(){return false;}); - $form.h5Validate(); - equal($form.h5Validate('allValid'), true, 'Adding an external validator to a selector that does not exist should not cause validation to fail.'); - }); + test('External validators should be run in the context of the DOM element of the target field.',function () { + var $form = $('#externalValidationForm'), + $field = $('#externalValidationFieldExample'); + $.h5Validate.addValidator($field,function() { + equal(this, $field.get(0), 'External validators should be run in the context of the DOM element of the target field.'); + return true; + }); + $form.h5Validate(); + $field.h5Validate('isValid'); + }); - test('External validators should be passed the value of the DOM element.',function () { - var $form = $('#externalValidationForm'), - $field = $('#externalValidationFieldExample'); - $.h5Validate.addExternalValidator($field,function(value) { - equal(value, $field.val(), 'External validators should be passed the value of the DOM element.'); - return true; + test('If an added validator fails, the validity "failedValidator" field should be true.',function () { + var $form = $('#externalValidationForm'), + $field = $('#externalValidationFieldNotExampleNotNamed'); + $.h5Validate.addValidator($field,function(value){return value == 'example';}); + $field.on('validated',function(event,validity) { + ok(validity.failedValidator, 'If an added validator fails, the validity "failedValidator" field should be true.'); + }); + $form.h5Validate(); + $field.h5Validate('isValid'); }); - $form.h5Validate(); - $field.h5Validate('isValid'); - }); - test('External validators should be run in the context of the DOM element of the target field.',function () { - var $form = $('#externalValidationForm'), - $field = $('#externalValidationFieldExample'); - $.h5Validate.addExternalValidator($field,function() { - equal(this, $field.get(0), 'External validators should be run in the context of the DOM element of the target field.'); - return true; + test('If no validator name is supplied,the validity "failedValidatorName" property should be null.',function () { + var $form = $('#externalValidationForm'), + $field = $('#externalValidationFieldNotExampleNotNamed'); + $.h5Validate.addValidator($field,function(value){return value == 'example';}); + $field.on('validated',function(event,validity) { + equal(validity.failedValidatorName, null, 'If no validator name is supplied,the validity "failedValidatorName" property should be null.'); + }); + $form.h5Validate(); + $field.h5Validate('isValid'); }); - $form.h5Validate(); - $field.h5Validate('isValid'); - }); + test('Supplied validator names should be assigned to the validity "failedValidatorName" property if they exist.',function () { + var $form = $('#externalValidationForm'), + $field = $('#externalValidationFieldNotExampleNamed'), + validatorName = 'exampleValidator'; + $.h5Validate.addValidator($field,function(value){return value == 'example';},{name: validatorName}); + $field.on('validated',function(event,validity) { + equal(validity.failedValidatorName, validatorName, 'Supplied validator names should be assigned to the validity "failedValidatorName" property if they exist.'); + }); + $form.h5Validate(); + $field.h5Validate('isValid'); + }); } exports.runTests = runTests; From 4a827d1b32054212c6c641348d966e03a9523ac5 Mon Sep 17 00:00:00 2001 From: Christian Lent Date: Sun, 17 Aug 2014 19:30:31 -0400 Subject: [PATCH 4/5] Refactored some builtin validators to use new "validators" array --- jquery.h5validate.js | 174 ++++++++++++++++++++++------------------ test/index.html | 27 ++++--- test/test.h5validate.js | 117 ++++++++++++++++----------- 3 files changed, 184 insertions(+), 134 deletions(-) diff --git a/jquery.h5validate.js b/jquery.h5validate.js index 566b667..173e580 100644 --- a/jquery.h5validate.js +++ b/jquery.h5validate.js @@ -93,8 +93,8 @@ invalidCallback: function () {}, validCallback: function () {}, - // Array of External Validator Functions. View the comment for addValidator for more information. - externalValidators: [], + // Array of Validator Functions. View the comment for addValidator for more information. + validators: [], // Elements to validate with allValid (only validating visible elements) allValidSelectors: ':input:visible:not(:button):not(:disabled):not(.novalidate)', @@ -142,7 +142,7 @@ $element.removeClass(options.errorClass).removeClass(options.validClass); $element.form.find("#" + options.element.id).removeClass(options.errorClass).removeClass(options.validClass); return $element; - } + }, } }, @@ -153,6 +153,7 @@ createValidity = function createValidity(validity) { return $.extend({ customError: validity.customError || false, + failedValidatorNames: [], patternMismatch: validity.patternMismatch || false, rangeOverflow: validity.rangeOverflow || false, rangeUnderflow: validity.rangeUnderflow || false, @@ -164,6 +165,66 @@ }, validity); }, + /** + * Add builtin validators to h5Validate. Currently, this adds the following validators: + * Required + * Maxlength + * Pattern + * @param {object} settings instance settings + */ + addBuiltinValidators = function (settings) { + settings.validators.push({selector: "*", validator: function(value) { + var maxlength = parseInt($(this).attr('maxlength'), 10); + return isNaN(maxlength) || value.length <= maxlength; + }, options: { + validityFailureFlag: 'tooLong', + name: 'maxlength', + }}); + + settings.validators.push({selector: "*", validator: function(value) { + var required = false, + $checkRequired = $(''), + $this = $(this); + + /* 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. + */ + if ($checkRequired.filter('[required]') && $checkRequired.filter('[required]').length) { + required = ($this.filter('[required]').length && $this.attr('required') !== 'false'); + } else { + required = ($this.attr('required') !== undefined); + } + + return !required || value; + }, options: { + validityFailureFlag: 'valueMissing', + name: 'required', + }}); + + settings.validators.push({selector: "*", validator: function(value) { + // 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 + ')$'); + + if (settings.debug && window.console) { + console.log('Validate called on "' + value + '" with regex "' + re + '".'); // **DEBUG + console.log('Regex test: ' + re.test(value) + ', Pattern: ' + pattern); // **DEBUG + } + + return !pattern || re.test(value) || !value; + }, options: { + validityFailureFlag: 'patternMismatch', + name: 'pattern', + }}); + }, + methods = { /** * Check the validity of the current field @@ -234,14 +295,7 @@ return valid; }, 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 + ')$'), $radiosWithSameName = null, value = ($this.is('[type=checkbox]')) ? $this.is(':checked') : ($this.is('[type=radio]') ? @@ -255,83 +309,45 @@ validClass = settings.validClass, errorIDbare = $this.attr(settings.errorAttribute) || false, // Get the ID of the error element. errorID = errorIDbare ? '#' + errorIDbare.replace(/(:|\.|\[|\])/g,'\\$1') : false, // Add the hash for convenience. This is done in two steps to avoid two attribute lookups. - required = false, - validity = createValidity({element: this, valid: true}), - $checkRequired = $(''), - maxlength; + validity = createValidity({element: this, valid: true}); - /* 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'); - } else { - required = ($this.attr('required') !== undefined); - } - - if (settings.debug && window.console) { - console.log('Validate called on "' + value + '" with regex "' + re + '". Required: ' + required); // **DEBUG - console.log('Regex test: ' + re.test(value) + ', Pattern: ' + pattern); // **DEBUG - } - - maxlength = parseInt($this.attr('maxlength'), 10); - if (!isNaN(maxlength) && value.length > maxlength) { - validity.valid = false; - validity.tooLong = true; - } - - // Iterate through the external validators. If any fail, the field fails. - for (var i = 0;iHTMTL5 pattern attribute. e.g.

Hint: It's expecting mm/dd/yyyy. Try typing "jQuery rocks!" instead.

- +

HTMTL5 maxlength attribute. e.g.

+ +
+ + +

Pattern Library

@@ -261,17 +266,17 @@

Bypassing Validation tests (via 'formnovalidate')

-

External Form Validation Tests

-
- - - - - - +

Form Validation Tests

+ + + + + + +
-
- + +
diff --git a/test/test.h5validate.js b/test/test.h5validate.js index eb3b553..e7bdd04 100644 --- a/test/test.h5validate.js +++ b/test/test.h5validate.js @@ -17,6 +17,15 @@ $input.val(''); }); + test('Missing required flag:', function () { + var $input = $('#name'); + $input.val(''); + $input.on('validated',function(event,validity) { + ok(validity.valueMissing, 'If the required validator fails, the validity property "valueMissing" should be true.'); + }); + $input.h5Validate('isValid'); + }); + test('Pattern attribute:', function () { var $input = $('#birthdate'); ok(($input.h5Validate('isValid')), 'Optional input should be valid when empty.'); @@ -26,6 +35,24 @@ ok((!$input.h5Validate('isValid')), 'Input should be invalid when given invalid input.'); }); + test('Missing pattern flag:', function () { + var $input = $('#birthdate'); + $input.val('foo'); + $input.on('validated',function(event,validity) { + ok(validity.patternMismatch, 'If the pattern validator fails, the validity property "patternMismatch" should be true.'); + }); + $input.h5Validate('isValid'); + }); + + test('Missing maxlength flag', function () { + var $input = $('#short-answer'); + $input.val('something longer than 10 characters'); + $input.on('validated',function(event,validity) { + ok(validity.tooLong, 'If the maxlength validator fails, the validity property "tooLong" should be true.'); + }); + $input.h5Validate('isValid'); + }); + test('Pattern library:', function () { var $input = $('#email'); $input.val('test@example.com'); @@ -302,88 +329,88 @@ $form.empty().remove(); }); - test('Adding an external validator should fail for non functions',function () { + test('Adding an validator should fail for non functions',function () { raises(function() { $.h5Validate.addValidator('[name="target-field"]',5); - }, Error, 'Should not be able to add an integer as an external validator.'); + }, Error, 'Should not be able to add an integer as an validator.'); raises(function() { $.h5Validate.addValidator('[name="target-field"]','5'); - }, Error, 'Should not be able to add a string as an external validator.'); + }, Error, 'Should not be able to add a string as an validator.'); raises(function() { $.h5Validate.addValidator('[name="target-field"]',null); - }, Error, 'Should not be able to add a null as an external validator.'); + }, Error, 'Should not be able to add a null as an validator.'); raises(function() { $.h5Validate.addValidator('[name="target-field"]',{}); - }, Error, 'Should not be able to add an object as an external validator.'); + }, Error, 'Should not be able to add an object as an validator.'); raises(function() { $.h5Validate.addValidator('[name="target-field"]',[]); - }, Error, 'Should not be able to add an array as an external validator.'); + }, Error, 'Should not be able to add an array as an validator.'); }); - test('Adding an external validator should succeed for functions',function () { + test('Adding an validator should succeed for functions',function () { $.h5Validate.addValidator('[name="target-field"]',function(){return true;}); - ok(true, 'Should be able to add a function as an external validator without causing an exception.'); + ok(true, 'Should be able to add a function as an validator without causing an exception.'); }); - test('Adding an external validator that returns true should not cause validation to fail.',function () { - var $form = $('#externalValidationForm'), - $field = $('#externalValidationFieldPass'); + test('Adding an validator that returns true should not cause validation to fail.',function () { + var $form = $('#validationForm'), + $field = $('#validationFieldPass'); $.h5Validate.addValidator($field,function(){return true;}); $form.h5Validate(); - equal($field.h5Validate('isValid'), true, 'Adding an external validator that returns true should not cause validation to fail.'); + equal($field.h5Validate('isValid'), true, 'Adding an validator that returns true should not cause validation to fail.'); }); - test('Adding an external validator that returns false should cause validation to fail.',function () { - var $form = $('#externalValidationForm'), - $field = $('#externalValidationFieldFail'); + test('Adding an validator that returns false should cause validation to fail.',function () { + var $form = $('#validationForm'), + $field = $('#validationFieldFail'); $.h5Validate.addValidator($field,function(){return false;}); $form.h5Validate(); - equal($field.h5Validate('isValid'), false, 'Adding an external validator that returns false should cause validation to fail.'); + equal($field.h5Validate('isValid'), false, 'Adding an validator that returns false should cause validation to fail.'); }); - test('Adding an external validator that confirms the value of the input should not cause validation to fail.',function () { - var $form = $('#externalValidationForm'), - $field = $('#externalValidationFieldExample'); + test('Adding an validator that confirms the value of the input should not cause validation to fail.',function () { + var $form = $('#validationForm'), + $field = $('#validationFieldExample'); $.h5Validate.addValidator($field,function(value){return value == 'example';}); $form.h5Validate(); - equal($field.h5Validate('isValid'), true, 'Adding an external validator that confirms the value of the input should not cause validation to fail.'); + equal($field.h5Validate('isValid'), true, 'Adding an validator that confirms the value of the input should not cause validation to fail.'); }); - test('Adding an external validator that disconfirms the value of the input should cause validation to fail.',function () { - var $form = $('#externalValidationForm'), - $field = $('#externalValidationFieldNotExample'); + test('Adding an validator that disconfirms the value of the input should cause validation to fail.',function () { + var $form = $('#validationForm'), + $field = $('#validationFieldNotExample'); $.h5Validate.addValidator($field,function(value){return value == 'example';}); $form.h5Validate(); - equal($field.h5Validate('isValid'), false, 'Adding an external validator that disconfirms the value of the input should cause validation to fail.'); + equal($field.h5Validate('isValid'), false, 'Adding an validator that disconfirms the value of the input should cause validation to fail.'); }); - test('Adding an external validator to a selector that does not exist should not cause validation to fail.',function () { - var $form = $('#externalValidationFormPass'); + test('Adding an validator to a selector that does not exist should not cause validation to fail.',function () { + var $form = $('#validationFormPass'); $.h5Validate.addValidator('atagthatdoesntexistinhtml',function(){return false;}); $form.h5Validate(); - equal($form.h5Validate('allValid'), true, 'Adding an external validator to a selector that does not exist should not cause validation to fail.'); + equal($form.h5Validate('allValid'), true, 'Adding an validator to a selector that does not exist should not cause validation to fail.'); }); - test('External validators should be passed the value of the DOM element.',function () { - var $form = $('#externalValidationForm'), - $field = $('#externalValidationFieldExample'); + test('validators should be passed the value of the DOM element.',function () { + var $form = $('#validationForm'), + $field = $('#validationFieldExample'); $.h5Validate.addValidator($field,function(value) { - equal(value, $field.val(), 'External validators should be passed the value of the DOM element.'); + equal(value, $field.val(), 'validators should be passed the value of the DOM element.'); return true; }); $form.h5Validate(); $field.h5Validate('isValid'); }); - test('External validators should be run in the context of the DOM element of the target field.',function () { - var $form = $('#externalValidationForm'), - $field = $('#externalValidationFieldExample'); + test('validators should be run in the context of the DOM element of the target field.',function () { + var $form = $('#validationForm'), + $field = $('#validationFieldExample'); $.h5Validate.addValidator($field,function() { - equal(this, $field.get(0), 'External validators should be run in the context of the DOM element of the target field.'); + equal(this, $field.get(0), 'validators should be run in the context of the DOM element of the target field.'); return true; }); $form.h5Validate(); @@ -391,8 +418,8 @@ }); test('If an added validator fails, the validity "failedValidator" field should be true.',function () { - var $form = $('#externalValidationForm'), - $field = $('#externalValidationFieldNotExampleNotNamed'); + var $form = $('#validationForm'), + $field = $('#validationFieldNotExampleNotNamed'); $.h5Validate.addValidator($field,function(value){return value == 'example';}); $field.on('validated',function(event,validity) { ok(validity.failedValidator, 'If an added validator fails, the validity "failedValidator" field should be true.'); @@ -401,24 +428,24 @@ $field.h5Validate('isValid'); }); - test('If no validator name is supplied,the validity "failedValidatorName" property should be null.',function () { - var $form = $('#externalValidationForm'), - $field = $('#externalValidationFieldNotExampleNotNamed'); + test('If no validator name is supplied,the validity "failedValidatorNames" property should be null.',function () { + var $form = $('#validationForm'), + $field = $('#validationFieldNotExampleNotNamed'); $.h5Validate.addValidator($field,function(value){return value == 'example';}); $field.on('validated',function(event,validity) { - equal(validity.failedValidatorName, null, 'If no validator name is supplied,the validity "failedValidatorName" property should be null.'); + deepEqual(validity.failedValidatorNames, [], 'If no validator name is supplied,the validity "failedValidatorNames" property should be an empty array.'); }); $form.h5Validate(); $field.h5Validate('isValid'); }); - test('Supplied validator names should be assigned to the validity "failedValidatorName" property if they exist.',function () { - var $form = $('#externalValidationForm'), - $field = $('#externalValidationFieldNotExampleNamed'), + test('Supplied validator names should be assigned to the validity "failedValidatorNames" property if they exist.',function () { + var $form = $('#validationForm'), + $field = $('#validationFieldNotExampleNamed'), validatorName = 'exampleValidator'; $.h5Validate.addValidator($field,function(value){return value == 'example';},{name: validatorName}); $field.on('validated',function(event,validity) { - equal(validity.failedValidatorName, validatorName, 'Supplied validator names should be assigned to the validity "failedValidatorName" property if they exist.'); + deepEqual(validity.failedValidatorNames, [validatorName], 'Supplied validator names should be assigned to the validity "failedValidatorNames" property if they exist.'); }); $form.h5Validate(); $field.h5Validate('isValid'); From 4480079b135f8559eabe1f346f225687a51eecb2 Mon Sep 17 00:00:00 2001 From: Christian Lent Date: Sun, 17 Aug 2014 22:37:52 -0400 Subject: [PATCH 5/5] Better default failure flags --- jquery.h5validate.js | 19 ++++++++++------- test/test.h5validate.js | 45 ++++++++++++++++++++++++++++++++++++++--- 2 files changed, 54 insertions(+), 10 deletions(-) diff --git a/jquery.h5validate.js b/jquery.h5validate.js index 173e580..0efb9be 100644 --- a/jquery.h5validate.js +++ b/jquery.h5validate.js @@ -154,14 +154,11 @@ return $.extend({ customError: validity.customError || false, failedValidatorNames: [], - patternMismatch: validity.patternMismatch || false, rangeOverflow: validity.rangeOverflow || false, rangeUnderflow: validity.rangeUnderflow || false, stepMismatch: validity.stepMismatch || false, - tooLong: validity.tooLong || false, typeMismatch: validity.typeMismatch || false, valid: validity.valid || true, - valueMissing: validity.valueMissing || false }, validity); }, @@ -313,9 +310,17 @@ // Iterate through the validators. If any fail, the field fails. for (var i = 0;i').h5Validate === 'function'), 'h5Validate exists'); }); + test('Required validation failure flag false by default:', function () { + var $form = $('
'), + $input = $('