wbotelhos / stepy Goto Github PK
View Code? Open in Web Editor NEW:feet: jQuery Stepy - A Wizard Plugin
Home Page: https://wbotelhos.com/stepy
License: MIT License
:feet: jQuery Stepy - A Wizard Plugin
Home Page: https://wbotelhos.com/stepy
License: MIT License
jquery ver_1.11
html:<input type="submit" name="submit" class="stepy-finish region_button">
@wbotelhos , thank for this amazing plugin.
Actually, I am working on uploading an image in stepy but I am unable to get it. Could you please tell me how can I upload image?
Looking forward to you quick reply.
Disabled fields are not tested, but in fact they should be!
1- in some cases, fields can be disabled while analyzing the input with Ajax!
2- a disabled field should contain a correct input in any case!
You should modify this line:
$($step.find(':input:enabled').get().reverse()).each(function() {
or add an option to test disabled fields
Thanks
puts tooltip on every element relative to the form number.
I used stepy for our wizard. I want to validate each element inside each field.
If all values entered means it should go to other field. else it should alert and return false?
How to accomplish this?
I have two validation plugins to be integrated with stepy. [Jquery Validation plugin or Parsley JS]
Note: I have gone through the documentation. I cant find exact hack of implementing it.
I was check your site https://wbotelhos.com/stepy for appreciate your examples but show me the next error message:
"Error 502 Ray ID: 45769beb6ac0b70b • 2018-09-09 03:36:10 UTC
Bad gateway".
"Cloudflare Ray ID: 45769beb6ac0b70b • Your IP: 179.5.230.156 • Performance & security by Cloudflare"
Users may want to rename this button to something besides 'Finish'. Add an option to give the button a new name, just like the back or next buttons.
This library currently has really limited and outdated documentation. It would be helpful if the author could expand on this documentation.
F.E. the library seems to expect & class ".stepy-finish" on a submit button, but the demo does not reflect this.
The stepy Works nice,
but i don't have a transition:
$('.formgen').stepy({
backLabel: 'Zurück',
block: true,
errorImage: true,
nextLabel: 'Nächster Abschnitt',
titleClick: true,
validate: true,
duration : 1400,
transition: 'fade'
});
Hi, as title say is there any way to know how many times a step was called in order to execute a function just the first time?
With v1.1.0 under Firefox, if the option finishButton is true, then the _bindFinish method is called... however the var finish won't be assigned to the 'submit' button, line #132
finish = that.children('input[type="submit"]');
finish will be set to null, but a jQuery alternative is
finish = $(':submit',that);
In your examples at http://wbotelhos.com/stepy one can see that you have something like:
$('#step').stepy({
next: function(index) {
if (!isValid()) {
alert('Invalid random value!');
return false;
}
alert('Going to step ' + index + '...');
}
});
but I get an error that isValid()
is not defined, tried to find in the source code and there is no such method to be called publicly. How can I validate the current step?
HI wbotelhos,
could you tell me how to add a function to the Back or Next Button?
thanks
sam
Hi,
I'ts possible to have the "NEXT" and 'PREV' button on top and bottom form ??
Regards
Massimo
If a field was disabled, then validation should not be executed and it should not block.
Sometimes when skipping a step with checkboxes in it, the validation will return an error:
Uncaught TypeError: Cannot read property 'name' of undefined
I'm not sure why this happens, the field does have the property 'name', but I solved it by an extra try/catch on line 290:
try {var fieldIsValid = $validate.element($(this));}catch (error){}
Hello! i need lot of help
I don't know how hide button next in a fieldset and call the action y other link?
Just letting you know when downloading the zip, the minified version is empty.
We'd like to have a fade-in/fade-out animation when changing slides. How would one implement this?
not work
$('#frm1').stepy({
backLabel: 'Назад',
nextLabel: 'Далее',
legend: false
});
$('#frm2').stepy({
backLabel: 'Назад',
nextLabel: 'Далее',
legend: false
});
$('#frm3').stepy({
backLabel: 'Назад',
nextLabel: 'Далее',
legend: false
});
Cannot have Multiple stepy instances when using bootsrap specifically inside modals
even though different classes are specified
In case we have more than 10 steps, the following happens:
Thanks,
Neha
Hi,
I am currently working on a personal project in which all my forms are validated using the validator engine from https://github.com/posabsolute/jQuery-Validation-Engine.
I just tried stepy in the project and it works marvelously well. my only problem is that it disables my validation plugin. Can you make it possible to support different kinds of validation plugins like the one am using or give me ideas on how to be able to get my validation plugin to work with stepy?
thank you.
Some features planned next:
back
and next
callback;<form/>
;How can i call jquery function in final step?
Hi
The fieldset title attribute has wrong behavior on Safari (and maybe other browsers): a mouseover tip will pop over the whole fieldset and all its included elements!
To avoid this problem, you should not use this reserved attribute.
how can i change the default step when using validation and advanced options ?
if i use something like this and i want to go to step 2 by default
$('#registration-form').stepy({
block: true,
description: false,
finishButton: true,
legend: false,
titleClick: true,
validate: true,
step:2
});
won't work
if i use
$('#registration-form').stepy('step', 2);
it works but validation is lost
If you have a wizard with option "block" enabled and hit enter on the first step form the wizard moves to the last steps and validates the whole form. It would be better to move to the next step only!
It looks like stepy is throwing:
$(step.find(':input:enabled').get().reverse()).each(function() {
var fieldIsValid = $validate.element($(this));
if (fieldIsValid === undefined) {
fieldIsValid = true;
}
isValid &= fieldIsValid;
if (isValid) {
if (self.opt.errorImage) { <--- This line
$title.removeClass('stepy-error');
}
} else {
if (self.opt.errorImage) {
$title.addClass('stepy-error');
}
$validate.focusInvalid();
}
});
Frankly, I'm unsure what I'm doing on my form setup that would cause this?
When a step is active most of the time its just that step that needs to be validated so you can change the line
$($step.find(':input:enabled').get().reverse()).each(function ()
to read
$($step.find(':input:enabled').not(":hidden").get().reverse()).each(function ()
This will only validate visible elements and not hidden steps. If you want more flexibility add a flag to properties for validatehidden:false and if someone wants that function they can set it to true (but i cant see any point of validating hidden fields)
To add support of excellent H5F validation plugin in Stepy, just add this code:
jQuery.extend ({
validator: {
setDefaults: function () {
}
}
});
jQuery.fn.extend ({
validate: function () {
return {
element: function (field) {
return field.get (0).checkValidity ();
},
focusInvalid: function () {
}
}
}
});
PS: i think H5F is better than jquery validator plugin because it respect more the HTML5 syntax, so it will be easier to maintain source code when HTML5 will be fully supported by browsers
I am using stepy in a research form. The user can leave the form any time and return later in the last step. For user return I am using this:
$('form').stepy('step', "step number") *step number is a real number not the string "step number"
It´s working fine, but the problem is that validation doesn´t work anymore after that.
Hi, Washington Botelho
I got some trouble with stppy when i am using a html editor, i can't get the value of textarea from server side.
this is the component: http://nicedit.com/ or ckeditor.com
Please help me.
Thanks
Best Regard's
Muchlis
Hi,
I really like this wizard plugin. I start to implement in my site, but I meet troubles with google maps.
When plugin is activated, map is not shown in whole window, but if I switch off stepy, maps is showing OK.
I attached pictures. Can you please check it, if is it possible to solve some-how?
Thank you very much.
Hi, I've two doubts about your plugin:
1 - It's possible to display step content on title click? If so, how?
2 - How do I know in which step I'm in order to load some content using AJAX calls?
PS: amazing plugin man, thanks for your hard work
jQuery('#custom').stepy({
back: function (index) {
var answer = confirm('Do you want to go to previous page? you may lose data of current page.');
if (!answer) {
return false;
}
}, next: function (index) {
if (!jQuery("#custom").validationEngine('validate') && index == "2") {
return false;
}
var f = jQuery("#custom");
var serializedform = f.serialize();
//preloader();
jQuery.post("/AdminNew/FrameAddjson", serializedform + '&indexval=' + index + '',
function (data, status) {
var frameid = data;
if (status == "success" && index == "2") {
alert("Frame added successfully");
}
});
},
select: function (index) {
},
finish: function (index) {
if (!jQuery("#custom").validationEngine('validate')) {
return false;
}
},
titleClick: true
//validate: true
});
If you have only one step there is a next button shown.
How to write my own function to the button created by me.
Almost made me go away.
Currently, it only focus on the first field even though the field does not contain error. Preferably, it should focus on the first field that contain error
It doesn't load your javascript and your css anymore.
When submitting a form containing invalid fields in previous steps, plugin will not jump back to bad step, like back and next buttons do!
This situation can occur when a field is under Ajax checking, so answer is delayed.
Hi, its possible to show/hide steps on the fly? What I want to do is if I mark a checkbox (checked = true) then I should add a step between 1 and 2, it's possible? How?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.