Comments (25)
You can use the
beforeNext
option available to provide a method to check on which step you are and do your validation.how to prevent from going to next step if validation fails
is there any update on this? can this be done?
from bulma-extensions.
You can use the
beforeNext
option available to provide a method to check on which step you are and do your validation.
how to prevent from going to next step if validation fails
from bulma-extensions.
Hi @itsursujit,
actually, It has :-)
But unfortunately its not documented (my bad). Find example below:
<form method="get" action="#" class="steps">
<div class="step-item is-active is-success">
<div class="step-marker">1</div>
<div class="step-details">
<p class="step-title">Account</p>
</div>
</div>
<div class="step-item">
<div class="step-marker">2</div>
<div class="step-details">
<p class="step-title">Profile</p>
</div>
</div>
<div class="step-item">
<div class="step-marker">3</div>
<div class="step-details">
<p class="step-title">Social</p>
</div>
</div>
<div class="step-item">
<div class="step-marker">4</div>
<div class="step-details">
<p class="step-title">Finish</p>
</div>
</div>
<div class="steps-content">
<div class="step-content has-text-centered is-active">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Username</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" name="username" id="username" type="text" placeholder="Username" autofocus data-validate="require">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Password</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icon has-icon-right">
<input class="input" type="password" name="password" id="password" placeholder="Password" data-validate="require">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Confirm password</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icon has-icon-right">
<input class="input" type="password" name="password_confirm" id="password_confirm" placeholder="Confirm password" data-validate="require">
</div>
</div>
</div>
</div>
</div>
<div class="step-content has-text-centered">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Firstname</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" name="firstname" id="firstname" type="text" placeholder="Firstname" autofocus data-validate="require">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Last name</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icon has-icon-right">
<input class="input" type="text" name="lastname" id="lastname" placeholder="Last name" data-validate="require">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Email</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icon has-icon-right">
<input class="input" type="email" name="email" id="email" placeholder="Email" data-validate="require">
</div>
</div>
</div>
</div>
</div>
<div class="step-content has-text-centered">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Facebook account</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" name="facebook" id="facebook" type="text" placeholder="Facebook account url" autofocus data-validate="require">
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Twitter account</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" name="twitter" id="twitter" type="text" placeholder="Twitter account url" autofocus data-validate="require">
</div>
</div>
</div>
</div>
</div>
<div class="step-content has-text-centered">
<h1 class="title is-4">Your account is now created !</h1>
</div>
</div>
<div class="steps-actions">
<div class="steps-action">
<a href="#" data-nav="previous" class="button is-light">previous</a>
</div>
<div class="steps-action">
<a href="#" data-nav="next" class="button is-primary">Next</a>
</div>
</div>
</form>
from bulma-extensions.
Thank you for your quick response. How can I validate required fields before moving to next step? Are there any options available?
from bulma-extensions.
You can use the beforeNext
option available to provide a method to check on which step you are and do your validation.
from bulma-extensions.
How can I use beforeNext
?
I'm using new StepsWizard(document.getElementById("stepsDemo"))
from bulma-extensions.
just define your method as option like below:
var stepsWizard = new StepsWizard(document.getElementById("stepsDemo"), {
'beforeNext': function( step_id ) {
switch( step_id ) {
case 1:
// DO YOUR VALIDATION FOR FIRST STEP (steps_id start at 0)
break;
...
}
}
} );
There is also an onShow
onFinish
available entry points.
from bulma-extensions.
I note on my todo to detail the use of the JS into the documentation ;-)
from bulma-extensions.
Thank you! I think I've just found a bug. When you reach last step i.e. from step 3 to step 4, the next button can be clicked even after it is disabled and taking me back to step 3
from bulma-extensions.
Thanks for the notice. I'll have a look on it.
I don't have the case on my side. That strange. Are you sure you have same amount of steps and step-content ?
from bulma-extensions.
Do you have the same issue with the demo on the documentation page ?
from bulma-extensions.
No. The demo wi JS implementation working well there.
from bulma-extensions.
Can you please provide a working codepen.io so I'll be able to have a look.
from bulma-extensions.
Sure. Give me some minutes
from bulma-extensions.
Here: https://codepen.io/itsursujit/pen/OzEryR
from bulma-extensions.
The issue seems to related to the fact you are using links for navigation button.
If you use button it works.
I'll see how to fix that (not today I need to leave)
from bulma-extensions.
Much Appreciated! Thanks
from bulma-extensions.
I think it's because a link can't be really disabled so my script intercept the click on it.
from bulma-extensions.
In that case placing css pointer-events: none
might work
from bulma-extensions.
It has been fixed.
from bulma-extensions.
Hello, I 'm trying to add a validation to the extension, I have come to this article through google. But it is impossible to instantiate the "StepsWizard" object in order to define "beforeNext". I do not know how I should use it or where I have to define it. I do not want to touch the file "bulma-steps.js"
Thanks for all
from bulma-extensions.
Hi @marctorresbcn ,
see comment: #20 (comment)
You have to define that into your own JS file after importing the bulma-steps.js file.
from bulma-extensions.
How can i use new StepsWizard().
from bulma-extensions.
"StepsWizard is not defined". I have imported bulma-steps.
import bulmaSteps from 'bulma-extensions/bulma-steps/dist/bulma-steps'
Could you please help me to resolve the issue?
from bulma-extensions.
You can use the
beforeNext
option available to provide a method to check on which step you are and do your validation.how to prevent from going to next step if validation fails
is there any update on this? can this be done?
Hi, take a look here: Wikiki/bulma-steps#36 (comment).
Regards.
from bulma-extensions.
Related Issues (20)
- Bulma steps
- Update checkradio version
- Unrecognized text Switch
- Quickview additional variables
- bulma-slider is out-of-date and doesn't compile
- datetimepicker-clear-button in bulma-calendar submits a form HOT 4
- Bulma FormValidation
- Timeline not working for me
- Flip tooltips to other positions when near the edge of viewport HOT 1
- Options are not working when using bulma calendar
- Bulma Collapsible HOT 1
- bulma-switch.min.css has sass variables
- Unable to use bulma-carousel
- [Feature Request] Organizational or tree chart
- Using Bulma Extensions with Gatsby
- Pulling "bulma-slider" v1.0.4 instead of latest one
- Tooltip cropped in table-container HOT 1
- Tooltip not displaying HOT 2
- [CHECKBOX] RTL also reverses switch direction
- Activate tooltip on :hover only (not on :focus) ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bulma-extensions.