diff --git a/changelog.md b/changelog.md index dc244e1..97ffd23 100644 --- a/changelog.md +++ b/changelog.md @@ -9,6 +9,10 @@ ## Changes ++ Validate only last step in step(), which allows to jump to arbitrary step while validator enabled. ++ validate() code clean-up. ++ Optional second boolean argument of step() which allows to suppress validation at all. ++ Stop previous animation so multiple steps will not be visible when jumping to arbitrary step. + The container that holds the navigation buttons now has the class 'stepy-buttons'; + The error container class was renamed to plural 'stepy-errors'; + Forms without ID will receives a genarated hash to be used as hook; diff --git a/lib/jquery.stepy.css b/lib/jquery.stepy.css index 9b56f3f..65f057c 100755 --- a/lib/jquery.stepy.css +++ b/lib/jquery.stepy.css @@ -1,39 +1,37 @@ -@CHARSET "UTF-8"; - -body { font-size: 10px } - -.stepy-header { list-style: none; padding: 0; width: 724px } - .stepy-header li { cursor: pointer; float: left; padding: 10px } - .stepy-header li.stepy-error { background: url('../demo/img/error.png') no-repeat right top } - .stepy-header li div { color: #CCC; font: bold 2.8em verdana; text-shadow: 1px 1px #F8F8F8 } - .stepy-header li.stepy-active div { color: #369; cursor: auto } - .stepy-header li span { color: #CCC; font: 1.4em verdana } - .stepy-header li.stepy-active span { color: #BBB } - -.stepy-step { border: 1px solid #BBB; clear: left; padding: 15px 20px; width: 600px; -khtml-border-radius: 3px; -moz-border-radius: 3px; -opera-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px } - .stepy-step legend { color: #4080BF; font: bold 1.8em arial; letter-spacing: .7px; padding: 0 2px 3px } - .stepy-step label { color: #222; display: block; font: bold 1.5em arial; letter-spacing: .7px; margin: 10px 0 3px 1px } - - .stepy-step input, - .stepy-step textarea, - .stepy-step select { border: 1px solid #999; border-radius: 5px; color: #333; font-size: 1.4em; height: 27px; margin-bottom: 12px; padding: 3px; width: 90% } - - .stepy-step select { height: 34px; padding-top: 5px } - - .stepy-step textarea { height: 100px } - - .stepy-navigator { height: 33px; margin-top: 20px } - .button-back { float: left } - - .button-next, - .stepy-navigator input[type="submit"] { float: right } - - .button-back, - .button-next, - .stepy-navigator input[type="submit"] { border: 1px solid #CCC; color: #7F0055; cursor: pointer; font: 1.2em verdana; padding: 7px 15px 8px; text-decoration: none; -khtml-border-radius: 3px; -moz-border-radius: 3px; -opera-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px } - - .stepy-navigator input[type="submit"] { background-color: transparent; border-color: #CCC; margin-bottom: 0; padding: 7px 15px 24px; width: 90px } - - .button-back:hover, - .button-next:hover, - .stepy-navigator input[type="submit"]:hover { border-color: #BBB; color: #B07 } +@CHARSET "UTF-8"; + +.stepy-header { list-style: none; padding: 0; width: 724px } + .stepy-header li { cursor: pointer; float: left; padding: 10px } + .stepy-header li.stepy-error { background: url('../demo/img/error.png') no-repeat right top } + .stepy-header li div { color: #CCC; font: bold 1.1em verdana; text-shadow: 1px 1px #F8F8F8 } + .stepy-header li.stepy-active div { color: #369; cursor: auto } + .stepy-header li span { color: #CCC; font: 1.1em verdana } + .stepy-header li.stepy-active span { color: #BBB } + +.stepy-step { border: 1px solid #BBB; clear: left; padding: 15px 20px; width: 600px; -khtml-border-radius: 3px; -moz-border-radius: 3px; -opera-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px } + .stepy-step legend { color: #4080BF; font: bold 1.1em arial; letter-spacing: .7px; padding: 0 2px 3px } + .stepy-step label { color: #222; display: block; font: bold 1em arial; letter-spacing: .7px; margin: 10px 0 3px 1px } + + .stepy-step input, + .stepy-step textarea, + .stepy-step select { border: 1px solid #999; border-radius: 5px; color: #333; font-size: 0.9em; height: 27px; margin-bottom: 12px; padding: 3px; width: 90% } + + .stepy-step select { height: 34px; padding-top: 5px } + + .stepy-step textarea { height: 100px } + + .stepy-navigator { height: 33px; margin-top: 20px } + .button-back { float: left } + + .button-next, + .stepy-navigator input[type="submit"] { float: right } + + .button-back, + .button-next, + .stepy-navigator input[type="submit"] { border: 1px solid #CCC; color: #7F0055; cursor: pointer; font: 0.9em verdana; padding: 7px 15px 8px; text-decoration: none; -khtml-border-radius: 3px; -moz-border-radius: 3px; -opera-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px } + + .stepy-navigator input[type="submit"] { background-color: transparent; border-color: #CCC; margin-bottom: 0; padding: 7px 15px 24px; width: 90px } + + .button-back:hover, + .button-next:hover, + .stepy-navigator input[type="submit"]:hover { border-color: #BBB; color: #B07 } diff --git a/lib/jquery.stepy.js b/lib/jquery.stepy.js index 8487a7d..96d309f 100755 --- a/lib/jquery.stepy.js +++ b/lib/jquery.stepy.js @@ -176,7 +176,8 @@ e.preventDefault(); if (!self.opt.back || methods._execute.call(self, self.opt.back, index - 1)) { - methods.step.call(self, (index - 1) + 1); + // Suppress validation of current step when going back. + methods.step.call(self, (index - 1) + 1, false); } }).appendTo(nav); }, _createButtons: function(step, index) { @@ -270,7 +271,13 @@ steps.find('p.stepy-navigator').remove(); } }); - }, step: function(index) { + }, + /** + * When jumping to arbitrary step, use validateStep = true; + * otherwise jumping will be interrupted by validation failure. + */ + step: function(index,validateStep) { + validateStep = validateStep === undefined || validateStep != false; var self = this that = $(this), opt = that[0].opt; @@ -286,7 +293,19 @@ var max = index; // Remove Validator... - if (opt.validate) { + if (opt.validate && validateStep) { + // validate only last step + // there is no need to validate all steps, otherwise jumping to arbitrary steps will not work. + var stepIdxExpr = /-head-(\d+)$/ig; + var matches = stepIdxExpr.exec(that[0].heads.filter('.stepy-active').attr('id')); + if (matches.length == 2) { + var lastIdx = parseInt(matches.pop()); + console.log('validating lastIdx:'+lastIdx); + if ( lastIdx !== index && !methods.validate.call(this,lastIdx) ) { + return; + } + } + /* var isValid = true; for (var i = 0; i < index; i++) { @@ -297,12 +316,14 @@ break; } } + */ } // WIP... var stepsCount = steps.length; if (opt.transition == 'fade') { + steps.stop(); steps.fadeOut(opt.duration, function() { if (--stepsCount > 0) { return; @@ -311,6 +332,7 @@ steps.eq(max).fadeIn(opt.duration); }); } else if (opt.transition == 'slide') { + steps.stop(); steps.slideUp(opt.duration, function() { if (--stepsCount > 0) { return; @@ -348,14 +370,13 @@ return true; } - var self = this, + var self = (this.get === undefined) ? this : this.get(0), step = that.children('fieldset').eq(index), isValid = true, - $title = $('#' + that.attr('id') + '-header').children().eq(index), - $validate = that.validate(); + $title = $('#' + that.attr('id') + '-header').children().eq(index); $(step.find(':input:enabled').get().reverse()).each(function() { - var fieldIsValid = $validate.element($(this)); + var fieldIsValid = $(this).valid(); if (fieldIsValid === undefined) { fieldIsValid = true; @@ -372,7 +393,7 @@ $title.addClass('stepy-error'); } - $validate.focusInvalid(); + $(this).focus(); } });