-
Notifications
You must be signed in to change notification settings - Fork 18
/
excluded-option.html
131 lines (125 loc) · 6.14 KB
/
excluded-option.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<title>Excluded plugin - FormValidation</title>
<meta charset="utf-8" />
<meta content="width=device-width,initial-scale=1" name="viewport" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />
</head>
<body>
<div class="container">
<form id="demoForm" method="POST">
<div class="form-group">
<label>Which Javascript framework you like most?</label>
<div class="form-check">
<input type="radio" class="form-check-input" name="framework" value="angular" />
<label>Angular</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="framework" value="ember" />
<label>Ember</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="framework" value="backbone" />
<label>Backbone</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="framework" value="react" />
<label>React</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="framework" value="Knockout" />
<label>Knockout</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="framework" value="other" />
<label>Other</label>
</div>
</div>
<div class="form-group" id="otherOptionContainer">
<label>Please specify the framework:</label>
<input type="text" class="form-control" name="otherFramework" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
<script src="/vendors/@form-validation/umd/plugin-bootstrap/index.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function (e) {
const demoForm = document.getElementById('demoForm');
// Get the submit button element
const submitButton = demoForm.querySelector('[type="submit"]');
const fv = FormValidation.formValidation(demoForm, {
fields: {
framework: {
validators: {
notEmpty: {
message: 'Please select a framework',
},
},
},
otherFramework: {
validators: {
notEmpty: {
message: 'Please specific the framework',
},
},
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
submitButton: new FormValidation.plugins.SubmitButton(),
bootstrap: new FormValidation.plugins.Bootstrap(),
excluded: new FormValidation.plugins.Excluded({
excluded: function (field, ele, eles) {
const selectedCheckbox = demoForm.querySelector('[name="framework"]:checked');
const framework = selectedCheckbox ? selectedCheckbox.value : '';
const ignored =
(field === 'otherFramework' && framework !== 'other') ||
(field === 'framework' && framework === 'other');
return ignored;
},
}),
icon: new FormValidation.plugins.Icon({
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh',
}),
fieldStatus: new FormValidation.plugins.FieldStatus({
onStatusChanged: function (areFieldsValid) {
if (areFieldsValid) {
// Enable the submit button
// so user has a chance to submit the form again
submitButton.removeAttribute('disabled');
} else {
// Disable the submit button
submitButton.setAttribute('disabled', 'disabled');
}
},
}),
},
}).on('core.form.valid', function () {
// This is for testing purpose
// You should see it when the form is valid
alert('Form is valid');
});
Array.from(demoForm.querySelectorAll('[name="framework"]')).forEach((ele) => {
ele.addEventListener('change', function (e) {
fv.revalidateField('otherFramework');
});
});
});
</script>
</body>
</html>