@@ -683,10 +683,10 @@ QUnit.test('Issue #481 - writeInputAttributes doesn\'t unwrap params to sync att
683683 assert . strictEqual ( $element . attr ( 'min' ) , '15' , 'min attribute is written' ) ;
684684} ) ;
685685
686- QUnit . test ( 'Issue #80 - Write HTML5 Validation Attributes programmatically' , function ( assert ) {
686+ QUnit . test ( 'Issues #80,#200 - Write HTML5 Validation Attributes programmatically' , function ( assert ) {
687687
688688 var vm = {
689- testObj : ko . observable ( 15 ) . extend ( { min : 1 , max : 100 , required : true , step : 2 , pattern : / b l a h / i} )
689+ testObj : ko . observable ( 15 ) . extend ( { min : 1 , max : 100 , minLength : 5 , maxLength : 25 , required : true , step : 2 , pattern : / b l a h / i} )
690690 } ;
691691
692692 // setup the html
@@ -703,13 +703,17 @@ QUnit.test('Issue #80 - Write HTML5 Validation Attributes programmatically', fun
703703 var $el = $ ( '#testElement' ) ;
704704 var tests = { } ;
705705
706- ko . utils . arrayForEach ( [ 'required' , 'min' , 'max' , 'step' , 'pattern' ] , function ( attr ) {
706+ // The Native Rule names are Camel Case, but the HTML5 validation
707+ // attributes are all lower case
708+ ko . utils . arrayForEach ( [ 'required' , 'min' , 'max' , 'minlength' , 'maxlength' , 'step' , 'pattern' ] , function ( attr ) {
707709 tests [ attr ] = $el . attr ( attr ) ;
708710 } ) ;
709711
710712 assert . ok ( tests . required , 'Required Found' ) ;
711713 assert . strictEqual ( tests . min , '1' , 'Min Found' ) ;
712714 assert . strictEqual ( tests . max , '100' , 'Max Found' ) ;
715+ assert . strictEqual ( tests . minlength , '5' , 'MinLength Found' ) ;
716+ assert . strictEqual ( tests . maxlength , '25' , 'MaxLength Found' ) ;
713717 assert . strictEqual ( tests . step , '2' , 'Step Found' ) ;
714718 assert . strictEqual ( tests . pattern , 'blah' , 'Pattern Found' ) ;
715719
@@ -845,6 +849,110 @@ QUnit.test('HTML5 Input types', function(assert) {
845849 } , 1 ) ;
846850} ) ;
847851
852+ QUnit . test ( 'maxlength Attribute of 8 should fail for text of length 11' , function ( assert ) {
853+ var done = assert . async ( ) ;
854+ assert . expect ( 3 ) ;
855+
856+ var vm = {
857+ someText : ko . validatedObservable ( )
858+ } ;
859+
860+ addTestHtml ( '<input id="myTestInput" type="text" maxlength="8" data-bind="value: someText, validationElement: someText" />' ) ;
861+
862+ ko . validation . init ( { parseInputAttributes : true } , true ) ;
863+ applyTestBindings ( vm ) ;
864+
865+ setTimeout ( function ( ) {
866+ vm . someText ( 'MuchTooLong' ) ; // should fail the maxLength rule
867+
868+ var el = $ ( '#myTestInput' ) ;
869+
870+ assert . ok ( el , 'found element' ) ;
871+ assert . ok ( ! vm . someText . isValid ( ) , 'Object is not valid' ) ;
872+ assert . equal ( vm . someText . error ( ) , 'Please enter no more than 8 characters.' ,
873+ 'Message needs to be formatted correctly' ) ;
874+
875+ done ( ) ;
876+ } , 1 ) ;
877+ } ) ;
878+
879+ QUnit . test ( 'maxlength Attribute of 20 should succeed for text of length 11' , function ( assert ) {
880+ var done = assert . async ( ) ;
881+ assert . expect ( 2 ) ;
882+
883+ var vm = {
884+ someText : ko . validatedObservable ( )
885+ } ;
886+
887+ addTestHtml ( '<input id="myTestInput" type="text" maxlength="20" data-bind="value: someText, validationElement: someText" />' ) ;
888+
889+ ko . validation . init ( { parseInputAttributes : true } , true ) ;
890+ applyTestBindings ( vm ) ;
891+
892+ setTimeout ( function ( ) {
893+ vm . someText ( 'ShortEnough' ) ; // should pass the maxLength rule
894+
895+ var el = $ ( '#myTestInput' ) ;
896+
897+ assert . ok ( el , 'found element' ) ;
898+ assert . ok ( vm . someText . isValid ( ) , 'Object is valid' ) ;
899+
900+ done ( ) ;
901+ } , 1 ) ;
902+ } ) ;
903+
904+ QUnit . test ( 'minlength Attribute of 20 should fail for text of length 8' , function ( assert ) {
905+ var done = assert . async ( ) ;
906+ assert . expect ( 3 ) ;
907+
908+ var vm = {
909+ someText : ko . validatedObservable ( )
910+ } ;
911+
912+ addTestHtml ( '<input id="myTestInput" type="text" minlength="20" data-bind="value: someText, validationElement: someText" />' ) ;
913+
914+ ko . validation . init ( { parseInputAttributes : true } , true ) ;
915+ applyTestBindings ( vm ) ;
916+
917+ setTimeout ( function ( ) {
918+ vm . someText ( 'TooShort' ) ; // should fail the minLength rule
919+
920+ var el = $ ( '#myTestInput' ) ;
921+
922+ assert . ok ( el , 'found element' ) ;
923+ assert . ok ( ! vm . someText . isValid ( ) , 'Object is not valid' ) ;
924+ assert . equal ( vm . someText . error ( ) , 'Please enter at least 20 characters.' ,
925+ 'Message needs to be formatted correctly' ) ;
926+
927+ done ( ) ;
928+ } , 1 ) ;
929+ } ) ;
930+
931+ QUnit . test ( 'minlength Attribute of 5 should succeed for text of length 10' , function ( assert ) {
932+ var done = assert . async ( ) ;
933+ assert . expect ( 2 ) ;
934+
935+ var vm = {
936+ someText : ko . validatedObservable ( )
937+ } ;
938+
939+ addTestHtml ( '<input id="myTestInput" type="text" minlength=5 data-bind="value: someText, validationElement: someText" />' ) ;
940+
941+ ko . validation . init ( { parseInputAttributes : true } , true ) ;
942+ applyTestBindings ( vm ) ;
943+
944+ setTimeout ( function ( ) {
945+ vm . someText ( 'LongEnough' ) ; // should pass the minLength rule
946+
947+ var el = $ ( '#myTestInput' ) ;
948+
949+ assert . ok ( el , 'found element' ) ;
950+ assert . ok ( vm . someText . isValid ( ) , 'Object is valid' ) ;
951+
952+ done ( ) ;
953+ } , 1 ) ;
954+ } ) ;
955+
848956QUnit . test ( 'min Attribute of 20 should fail for value of 8' , function ( assert ) {
849957 var done = assert . async ( ) ;
850958 assert . expect ( 3 ) ;
@@ -1368,4 +1476,3 @@ QUnit.test('min Attribute of 2012-W03 should succeed for value of 2013-W01', fun
13681476} ) ;
13691477
13701478//#endregion
1371-
0 commit comments