mgildea / Multi-Step-Form-Js

Multi Step Form with jQuery validation
MIT License
49 stars 25 forks source link

Another enhancement request :) #9

Closed lvmajor closed 6 years ago

lvmajor commented 7 years ago

Hehe, me striking again :P I'd like to know if you would have an idea of a way to be able to click through the steps in whatever order we want. Making all the headers clickable instead of having to pass through each step in the order they are presented... ?

mgildea commented 7 years ago

I thought about that use case and think its a good idea; need to think about how to handle any jquery validation on earlier steps in the form if they are skipped...any ideas?

lvmajor commented 6 years ago

Could use an object to track each page's validation status and only trigger validation when they are marked as not yet validated/dirty. Then if any info on a page is updated, mark it as "dirty" and pass validation again...

I know it's pretty vague, I will try to find some time to think about it in the following days but I can't say I have a great idea to implement it right away :(

mgildea commented 6 years ago

just pushed this clickable navigation feature and published to npm. pass parameter { allowClickNavigation : true }, checkout the jsfiddle in the README...let me know if you find any issues

lvmajor commented 6 years ago

Really nice feature IMO, will update and test it out during the day, thanks for implementing it, really appreciated!

lvmajor commented 6 years ago

Hi there, I have a little issue (question in fact) regarding the latest update but I don't want to open a new issue as it may be "by design" and might be that my specific use case is not supported.

I'd like to understand the goal of removing the current validator.settings.ignore settings prior to run validation on the views when submitting the form on final step?

My problem with it is that some "steps" are considered optional so I put a checkbox on the page to let user specify they don't want to fill this step, in which case validation should be skipped. This is effectively done by adding the "disabled" state to the fieldset. The problem arises when submitting the form in the final step, then it runs without the "ignore" options and hence doesn't allow form submit to go through correctly.

I'd like to better understand the goal of this modification to be able to find a suitable workaround/propose something that would better fit everyone's needs (except if you tell me it's by design, then I would understand you would leave it like it is)

Thanks again for implementing the clickable headers btw, it's really nice! (And I guess it has something to do with the added ignore options reset hehe)

mgildea commented 6 years ago

it was not by design, it is used when attempting to submit the form or when attempting to navigate ahead and possibly skipping a step. That portion of code validates all of the hidden forms. jquery validation by default skips hidden forms. So instead of showing them and then validating i simply removed that default to validate and then put it back....BUT a better way would be to remove the ":hidden" substring from the string and validate instead of completely removing everything; add it back when done if it existed previously. This would require all fields that are hidden by the developer by design could not be a child element of the msf-view element. which i dont think would cause a problem...

summary: you are right, should probably open a new issue.

If you'd like to fix this, it'd be cool to continue to get contributions from others and keep growing this project. Otherwise I can get to it pretty soon.

lvmajor commented 6 years ago

What is the goal behind validating hidden forms ? They have been validated previously when clicking next right ? Oh... Because of the click through behavior in which case some steps could have been left behind unintentionally... Is that right ?

mgildea commented 6 years ago

ya basically,

two main reasons: 1) the final submit form can now be reached when allowUnvalidatedStep = true so previous forms which are hidden when they are not active need to be validated to prevent form submission, it also felt prudent to validate all fields on all forms for one final check before submission even if they went step by step.

2) with the click navigation its possible they can be on step 1 and click on step 3, in this case I have coded it to validate step 1 and step 2 before moving to step 3. If allowUnvalidatedStep = false, the next form shown is the next invalid form, if allowUnvalidatedStep = true then go to the step that was clicked on but run the validation on each previous step.

so since the previous or intermediate forms are hidden, jquery validation would skip the input elements and return that form as valid. So we need to temporarily remove the fact that jquery validation ignores hidden elements without affecting the users validation rules.

I have a validated and visited flag on each form that i originally was going to trust for this, but decided that input values on form X could affect input values on from Y so I figured each form needed run through the validation again.

kind of rambling response, but does that make sense?

lvmajor commented 6 years ago

Yes it does make sense. Except for the allowUnvalidatedSteps = true part which in my understanding should let user go from step 1 to step 3 in your previous example without triggering validation on step 2. In which case the final validation prior form submission totally makes sense.

But as you proposed, it could be better to only remove the : hidden selector from the ignore option to let the devs add custom selectors in case they want to let users skip some steps.

mgildea commented 6 years ago

with allowUnvalidatedStep = true, it will allow the user to go from step to step even if the current form they are on is invalid, but it still does the validation check. so going from step 1 to step 3 via click navigation will run validation on step 1, and step 2, and show step 3 regardless of the results of validating the previous steps.

lvmajor commented 6 years ago

Ok I get it, so it will display the step 2 as "unvalidated" but will let you skip to step 3, seems legit XD