xxxxxxxxxx
1
<ul class="stepper" data-mdb-stepper="stepper" data-mdb-stepper-linear="false">
2
<form class="needs-validation stepper-form" novalidate>
3
<li class="stepper-step stepper-active">
4
<div class="stepper-head">
5
<span class="stepper-head-icon">1</span>
6
<span class="stepper-head-text">step1</span>
7
</div>
8
<div class="stepper-content py-3">
9
<div class="form-outline">
10
<input type="password" id="custom-validation-input-1" class="form-control inputToValidate" required />
11
<label class="form-label" for="custom-validation-input-1">password</label>
12
</div>
13
</div>
14
</li>
15
<li class="stepper-step">
16
<div class="stepper-head">
17
<span class="stepper-head-icon">2</span>
18
<span class="stepper-head-text">step2</span>
19
</div>
20
<div class="stepper-content py-3">
21
<div class="form-outline">
22
<input type="text" id="custom-validation-input-2" class="form-control" required />
23
<label class="form-label" for="custom-validation-input-2">step 2</label>
24
</div>
25
</div>
26
</li>
27
<li class="stepper-step">
28
<div class="stepper-head">
29
<span class="stepper-head-icon">3</span>
30
<span class="stepper-head-text">step3</span>
31
</div>
32
<div class="stepper-content py-3">
33
<div class="form-outline">
34
<input type="text" id="custom-validation-input-3" class="form-control" required />
35
<label class="form-label" for="custom-validation-input-3">step 3</label>
36
</div>
37
</div>
38
</li>
39
</form>
40
</ul>
41
<div class="alert fade" id="alertExample" role="alert" data-mdb-color="warning" data-mdb-width="400px" data-mdb-position='top-left' data-mdb-autohide='true' data-mdb-delay='5111'>
42
Invalid value
43
</div>;
xxxxxxxxxx
1
.stepper {
2
margin-top: 110px;
3
}
xxxxxxxxxx
1
const alert = mdb.Alert.getInstance(document.getElementById("alertExample"))
2
const inputToValidate = document.querySelector('.inputToValidate');
3
4
document.querySelector('.stepper .stepper-step').addEventListener('onChangeStep.mdb.stepper', (e) => {
5
const inputLenght = inputToValidate.value.length;
6
if (inputLenght < 5) {
7
e.target.querySelector('.inputToValidate').setCustomValidity('Invalid');
8
alert.show()
9
e.preventDefault();
10
11
} else {
12
e.target.querySelector('.inputToValidate').setCustomValidity('');
13
alert.hide()
14
}
15
});
Console errors: 0