xxxxxxxxxx1
<!-- Form wizrd -->2
<div>3
<!-- Steps -->4
<ul class="stepper" id="stepper-form-example" data-mdb-stepper-linear="true">5
<form class="needs-validation stepper-form">6
<!-- First step -->7
<li class="stepper-step stepper-active">8
<div class="stepper-head">9
<span class="stepper-head-icon">1</span>10
<span class="stepper-head-text">step1</span>11
</div>12
<div class="stepper-content py-3">13
<form class="needs-validation" novalidate>14
<select15
class="select"16
id="basic-select"17
data-mdb-validation="true"18
data-mdb-valid-feedback="This value is valid"19
data-mdb-invalid-feedback="This value is invalid"20
>21
<option></option>22
<option value="2">Two</option>23
<option value="3">Three</option>24
<option value="4">Four</option>25
<option value="5">Five</option>26
<option value="6">Six</option>27
<option value="7">Seven</option>28
<option value="8">Eight</option>29
</select>30
31
</form>32
</div>33
</li>34
<!-- First step -->35
36
<!-- Second step -->37
<li class="stepper-step">38
<div class="stepper-head">39
<span class="stepper-head-icon">2</span>40
<span class="stepper-head-text">step2</span>41
</div>42
<div class="stepper-content py-3">43
<div class="form-outline mb-4">44
<input type="text" id="form6Example3" class="form-control" required />45
<label class="form-label" for="form6Example3">Company name<small class="text-muted">(required)</small></label>46
<div class="invalid-feedback">invalid</div>47
</div>48
49
<div class="form-outline mb-4">50
<input type="text" id="form6Example4" class="form-control" required />51
<label class="form-label" for="form6Example4">Address<small class="text-muted">(required)</small></label>52
<div class="invalid-feedback">invalid</div>53
</div>54
55
<div class="form-outline mb-4">56
<input type="email" id="form6Example5" class="form-control" required />57
<label class="form-label" for="form6Example5">Email<small class="text-muted">(required)</small></label>58
<div class="invalid-feedback">invalid</div>59
</div>60
61
<div class="form-outline mb-4">62
<input type="number" id="form6Example6" class="form-control" />63
<label class="form-label" for="form6Example6">Phone<small class="text-muted">(optional)</small></label>64
<div class="invalid-feedback">invalid</div>65
</div>66
</div>67
</li>68
<!-- Second step -->69
70
<!-- Third step -->71
<li class="stepper-step">72
<div class="stepper-head">73
<span class="stepper-head-icon">3</span>74
<span class="stepper-head-text">step3</span>75
</div>76
<div class="stepper-content py-3">77
<div class="form-outline mb-4">78
<textarea class="form-control" id="form6Example7" rows="4"></textarea>79
<label class="form-label" for="form6Example7">Additional information</label>80
</div>81
82
<div class="form-check d-flex justify-content-center mb-4">83
<input class="form-check-input me-2" type="checkbox" value="" id="form6Example8" checked/>84
<label class="form-check-label" for="form6Example8">Create an account?</label>85
</div>86
87
<button type="submit" class="btn btn-success btn-block mb-4">Place order</button>88
</div>89
</li>90
<!-- Third step -->91
</form>92
</ul>93
<!-- Steps -->94
95
<!-- Buttons -->96
<div class="d-flex justify-content-center px-3">97
<button id="form-example-prev-step" class="btn btn-primary w-100 me-2">Previous step</button>98
<button id="form-example-next-step" class="btn btn-primary w-100">Next step</button>99
</div>100
<!-- Buttons -->101
</div>102
<!-- Form wizrd -->1
1
xxxxxxxxxx1
const stepper = new mdb.Stepper(document.getElementById('stepper-form-example'));2
3
document.getElementById('form-example-next-step').addEventListener('click', () => {4
stepper.nextStep();5
});6
7
document.getElementById('form-example-prev-step').addEventListener('click', () => {8
stepper.previousStep();9
}); Console errors: 0