Giter VIP home page Giter VIP logo

Comments (25)

aman54kumar avatar aman54kumar commented on August 16, 2024 2

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.

ashoktandan avatar ashoktandan commented on August 16, 2024 1

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.

Wikiki avatar Wikiki commented on August 16, 2024

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.

sujit-baniya avatar sujit-baniya commented on August 16, 2024

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.

Wikiki avatar Wikiki commented on August 16, 2024

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.

sujit-baniya avatar sujit-baniya commented on August 16, 2024

How can I use beforeNext?
I'm using new StepsWizard(document.getElementById("stepsDemo"))

from bulma-extensions.

Wikiki avatar Wikiki commented on August 16, 2024

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.

Wikiki avatar Wikiki commented on August 16, 2024

I note on my todo to detail the use of the JS into the documentation ;-)

from bulma-extensions.

sujit-baniya avatar sujit-baniya commented on August 16, 2024

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.

Wikiki avatar Wikiki commented on August 16, 2024

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.

Wikiki avatar Wikiki commented on August 16, 2024

Do you have the same issue with the demo on the documentation page ?

from bulma-extensions.

sujit-baniya avatar sujit-baniya commented on August 16, 2024

No. The demo wi JS implementation working well there.

from bulma-extensions.

Wikiki avatar Wikiki commented on August 16, 2024

Can you please provide a working codepen.io so I'll be able to have a look.

from bulma-extensions.

sujit-baniya avatar sujit-baniya commented on August 16, 2024

Sure. Give me some minutes

from bulma-extensions.

sujit-baniya avatar sujit-baniya commented on August 16, 2024

Here: https://codepen.io/itsursujit/pen/OzEryR

from bulma-extensions.

Wikiki avatar Wikiki commented on August 16, 2024

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.

sujit-baniya avatar sujit-baniya commented on August 16, 2024

Much Appreciated! Thanks

from bulma-extensions.

Wikiki avatar Wikiki commented on August 16, 2024

I think it's because a link can't be really disabled so my script intercept the click on it.

from bulma-extensions.

sujit-baniya avatar sujit-baniya commented on August 16, 2024

In that case placing css pointer-events: none might work

from bulma-extensions.

Wikiki avatar Wikiki commented on August 16, 2024

It has been fixed.

from bulma-extensions.

marctorresbcn avatar marctorresbcn commented on August 16, 2024

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.

Wikiki avatar Wikiki commented on August 16, 2024

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.

yuecheng-plus avatar yuecheng-plus commented on August 16, 2024

How can i use new StepsWizard().

from bulma-extensions.

MHassanSaqib avatar MHassanSaqib commented on August 16, 2024

"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.

masiref avatar masiref commented on August 16, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.