Skip to content
Permalink
Browse files

* Initial import

* Import de Jquery
* Import du plugin jquery stepformvalidation
* Ajout d'un exemple
  • Loading branch information...
kvaillant
kvaillant committed Jan 20, 2014
1 parent 7bd64f2 commit cb2c57f235e948c0a275d34f135f2e72fb0a14ac
Showing with 206 additions and 0 deletions.
  1. +11 −0 .project
  2. +47 −0 example.html
  3. +6 −0 js/jquery.min.js
  4. +142 −0 js/jquery.stepsformvalidation.js
@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>jquery-stepvalidation</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
</buildSpec>
<natures>
</natures>
</projectDescription>
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ajax step validation</title>
</head>
<body>
<header>
<h1>My first Ajax Form validation step</h1>
</header>
<nav></nav>
<section>
<script type="text/javascript">
$(document).ready(function() {
var ajaxParams = [{
type : 'POST',
data: {'data':'blablabla'},
url : './example/monPremierServiceAjax',
success : function(data, textStatus, XMLHttpRequest) {
// traitement du résultat
}
}];
ajaxParams.push({
type : 'POST',
data: {'data':'bonjour'},
url : './example/monSecondServiceAjax',
success : function(data, textStatus, XMLHttpRequest) {
// traitement du résultat
}
});
var stepV = $.stepValidation({
ajaxParams : ajaxParams,
onBeforeNextStep: function(previousResult) {},
onNextStep : function(params,step) {}, // Parameters = Current ajax param, current step number
onComplete : function(){
// Fin du traitement
}
}).start();
});
</script>
</section>
<footer></footer>
</body>
</html>

Large diffs are not rendered by default.

@@ -0,0 +1,142 @@
// MultiStep Validation AJAX Form v1.0.0 for jQuery
// Under Apache License 2014
// =============
// Author: Karl VAILLANT
// Created: 01/15/2014
// Website: http://www.karlvaillant.fr
// Description: Enable step by step validation AJAX Form
;(function( $ ) {
var VERSION = '1.0.0';

/**
* Main Object Constructor
* @param opts liste des paramètres
*/
function StepValidation(opts) {
var allSteps = [];
this._options = opts;
this._currentStep = 0;
if (this._options.ajaxParams && $.isArray(this._options.ajaxParams)) {
this._numberSteps = this._options.ajaxParams.length;
for (var i = 0; i < this._numberSteps; i++) {
// Set the param for each step
var currentItem = { params : this._options.ajaxParams[i]};
//set the step num
currentItem.step = i;
allSteps.push(currentItem);
}
}
this._allSteps = allSteps;
}

// plugin method for enable multi form
$.stepValidation = function(opts) {
var fullOpts = $.extend({}, $.stepValidation.defaults, opts || {});

var stepV = new StepValidation(fullOpts);
return stepV;
};

// override these in your code to change the default behavior and style
$.stepValidation.defaults = {

ajaxParams: [], // List ajax param for each ajax request
timeout: 0, // timeout in ms between each ajax call
breakOnFail: true, // Arrêt des étapes lors d'une erreur Ajax
onBeforeNextStep: function() {},
onNextStep : function() {}, // Parameters = Current ajax param, current step number
onComplete : function() {}
}

function _start(el){
var self = el;
if(self._currentStep < self._numberSteps) {
var step = self._allSteps[self._currentStep];
_ajaxCall(self,step);
} else {
complete(self);
}
return self;
}
// Recursive chained method
function _ajaxCall(el,step){
var self = el;
nextStep(self,step);
var ajaxRequest = $.ajax(step.params).done(function( data, textStatus, jqXHR) {
self._previousAjaxResult = data;
continueTrt(self);
}).fail(function(jqXHR, textStatus, errorThrown) {
if(self._options.breakOnFail){
self._currentStep = self._numberSteps;
complete(self);
} else {
continueTrt(self);
}
});

}

function continueTrt(self){
// incrementation to next step
self._currentStep++;
if(self._currentStep<self._numberSteps){ // If there is a next ste
// Call before next step
beforeNextStep(self);
var step = self._allSteps[self._currentStep];
// Set timeout
if($.isNumeric(self._options.timeout) && self._options.timeout > 0){
setTimeout(function(){_ajaxCall(self,step)},self._options.timeout);
} else {
_ajaxCall(self,step);
}
} else { // Otherwise, we are done
complete(self);
}
}
// Set new params for the next step
function _changeNextFormParam(el,opts){
self = el;
var newOpts = $.extend({}, self._allSteps[self._currentStep].params, opts || {});
self._allSteps[self._currentStep].params = newOpts;
}

//Prototype
StepValidation.prototype = {
start: function () {
_start(this);
return this;
},
changeNextFormParam: function (opts) {
_changeNextFormParam(this,opts);
return this;
}
};

$.stepValidation.version = VERSION;

// List des callbacks

// Callback on before next step form call
function beforeNextStep($this){
console.log('beforeNextStep');
if (typeof ($this._options.onBeforeNextStep) !== 'undefined') {
$this._options.onBeforeNextStep.call($this,$this._previousAjaxResult);
}
}

// Callback on next step form call
function nextStep($this,nextStep){
console.log('nextStep');
if (typeof ($this._options.onNextStep) !== 'undefined') {
$this._options.onNextStep.call($this,nextStep.params,nextStep.step);
}
}

function complete($this){
console.log('complete');
if (typeof ($this._options.onComplete) !== 'undefined') {
$this._options.onComplete.call($this);
}
}

})(jQuery);

0 comments on commit cb2c57f

Please sign in to comment.
You can’t perform that action at this time.