Stepper change validation text


Topic: Stepper change validation text

KuebelElch15 pro asked 3 years ago

Heyho, Is it possible to change the message the stepper shows if the form is invalid? Thanks!

Marta Szymanska staff pro premium answered 3 years ago

Hi, about which stepper are you talking? Please, paste here a link to our documentation or present your problem here: https://mdbootstrap.com/snippets/. Best, Marta

KuebelElch15 pro commented 3 years ago

Sorry for that delay, I mean this stepper: 

https://mdbootstrap.com/components/bootstrap-steps-stepper/

 

If I set some fields as requiered, the stepper shows an error text if the input is null. How can I change this error text? 

 


Marta Szymanska staff pro premium answered 3 years ago

Hi, Do you think about sth like in this code below?
<div class="card">
<div class="card-body">
<ul class="stepper linear">
<li class="step active">
<div data-step-label="Type something" class="step-title waves-effect waves-dark">Step 1</div>
<div class="step-new-content">
<div class="row">
<div class="md-form col-12 ml-auto">
<input id="email-linear" type="email" class="form-control validate" required>
<label for="email-linear">Your e-mail</label>
</div>
</div>
<div class="step-actions">
<button class="waves-effect waves-dark btn btn-sm btn-primary next-step">CONTINUE</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark">Step 2</div>
<div class="step-new-content">
<div class="row">
<div class="md-form col-12 ml-auto">
<textarea type="email" id="textarea-linear" class="md-textarea form-control" rows="3"></textarea>
<label for="textarea-linear">Material textarea</label>
</div>
</div>
<div class="step-actions">
<button class="waves-effect waves-dark btn btn-sm btn-primary next-step">CONTINUE</button>
<button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark">Step 3</div>
<div class="step-new-content">
Finish!
<div class="step-actions">
<button class="waves-effect waves-dark btn btn-sm btn-primary m-0 mt-4" type="button">SUBMIT</button>
</div>
</div>
</li>
</ul>
</div>
</div>
Best, Marta

Marta Szymanska staff pro premium answered 3 years ago

Of course, you can change type="email" for type="text" in textarea.

KuebelElch15 pro commented 3 years ago

Yes, but the text is in english. I would like to have this text in german. So I was wondering if I am able to change the error text that is displayed.


Marta Szymanska staff pro premium answered 3 years ago

Hi, all messages you can see in js/addons-pro/stepper.js and you can change them there and recompile. Best, Marta

gwinnem@strong.tv pro commented 3 years ago

If you document the stepper better it is easy to solve this issue. There is a attribute data-msg which allows you to set the message displayed when the validation is not valid.


Marta Szymanska staff pro premium commented 3 years ago

Hi, thank you for your solution. Best, Marta


gwinnem@strong.tv pro commented 3 years ago

Hi Marta. The solution was not mine. The functionality is already built in to the stepper from you guys.

Rgds Geirr


Marta Szymanska staff pro premium commented 3 years ago

Hi, ok, thanks.


Status

Closed

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No
Tags