Skip to content

Commit cd2dee5

Browse files
aswindasfogaswindasfog
committed
Fixed error message in Bootstrap 3 horizontal form display problem
Fixed the problem that error message show at bad place when using checkbox, radio and input-group in Bootstrap 3 horizontal form. This can close victorjonsson#126 and close victorjonsson#272.
1 parent 314f051 commit cd2dee5

File tree

2 files changed

+231
-5
lines changed

2 files changed

+231
-5
lines changed

‎src/main/dialogs.js

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,13 @@
3232
return $($elem.valAttr('error-msg-container'));
3333
} else {
3434
var $parent = $elem.parent();
35-
if (!$parent.hasClass('form-group') && !$parent.closest('form').hasClass('form-horizontal')) {
36-
var $formGroup = $parent.closest('.form-group');
37-
if ($formGroup.length) {
38-
return $formGroup.eq(0);
39-
}
35+
if($elem.attr('type') === 'checkbox' && $elem.closest('.checkbox').length) {
36+
$parent = $elem.closest('.checkbox').parent();
37+
} else if($elem.attr('type') === 'radio' && $elem.closest('.radio').length) {
38+
$parent = $elem.closest('.radio').parent();
39+
}
40+
if($parent.closest('.input-group').length) {
41+
$parent = $parent.closest('.input-group').parent();
4042
}
4143
return $parent;
4244
}

‎test/bootstrap3.html

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Bootstrap 3 Compatibility Test</title>
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
7+
</head>
8+
<body>
9+
<div class="container">
10+
<h2>Not Bootstrap form</h2>
11+
<form>
12+
<p>Text
13+
<input type="text" data-validation="required">
14+
</p>
15+
<p>Check
16+
<input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 1
17+
<input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 2
18+
<input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 3
19+
</p>
20+
<p>Select
21+
<input type="radio" name="exampleRadio" data-validation="required"> Radio 1
22+
<input type="radio" name="exampleRadio" data-validation="required"> Radio 2
23+
<input type="radio" name="exampleRadio" data-validation="required"> Radio 3
24+
</p>
25+
<input type="submit" class="button">
26+
</form>
27+
<hr>
28+
<h2>Basic form</h2>
29+
<form>
30+
<div class="form-group">
31+
<label class="control-label">Text</label>
32+
<input type="text" class="form-control" data-validation="required">
33+
</div>
34+
<div class="form-group">
35+
<div class="input-group">
36+
<div class="input-group-addon"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></div>
37+
<input type="text" class="form-control" data-validation="required">
38+
</div>
39+
</div>
40+
<div class="form-group">
41+
<label class="control-label">Check</label>
42+
<div class="checkbox">
43+
<label>
44+
<input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 1
45+
</label>
46+
</div>
47+
<div class="checkbox">
48+
<label>
49+
<input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 2
50+
</label>
51+
</div>
52+
<div class="checkbox">
53+
<label>
54+
<input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 3
55+
</label>
56+
</div>
57+
</div>
58+
<div class="form-group">
59+
<label class="control-label">Select</label>
60+
<div class="radio">
61+
<label>
62+
<input type="radio" name="exampleRadio" data-validation="required"> Radio 1
63+
</label>
64+
</div>
65+
<div class="radio">
66+
<label>
67+
<input type="radio" name="exampleRadio" data-validation="required"> Radio 2
68+
</label>
69+
</div>
70+
<div class="radio">
71+
<label>
72+
<input type="radio" name="exampleRadio" data-validation="required"> Radio 3
73+
</label>
74+
</div>
75+
</div>
76+
<button type="submit" class="btn btn-default">Submit</button>
77+
</form>
78+
<hr>
79+
<h2>Inline form</h2>
80+
<form class="form-inline">
81+
<div class="form-group">
82+
<label class="control-label">Text</label>
83+
<input type="text" class="form-control" data-validation="required">
84+
</div>
85+
<div class="form-group">
86+
<div class="input-group">
87+
<div class="input-group-addon"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></div>
88+
<input type="text" class="form-control" data-validation="required">
89+
</div>
90+
</div>
91+
<div class="form-group">
92+
<label class="control-label">Check</label>
93+
<div class="checkbox">
94+
<label class="checkbox-inline">
95+
<input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 1
96+
</label>
97+
</div>
98+
<div class="checkbox">
99+
<label class="checkbox-inline">
100+
<input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 2
101+
</label>
102+
</div>
103+
<div class="checkbox">
104+
<label class="checkbox-inline">
105+
<input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 3
106+
</label>
107+
</div>
108+
</div>
109+
<div class="form-group">
110+
<label class="control-label">Select</label>
111+
<div class="radio">
112+
<label class="radio-inline">
113+
<input type="radio" name="exampleRadio" data-validation="required"> Radio 1
114+
</label>
115+
</div>
116+
<div class="radio">
117+
<label class="radio-inline">
118+
<input type="radio" name="exampleRadio" data-validation="required"> Radio 2
119+
</label>
120+
</div>
121+
<div class="radio">
122+
<label class="radio-inline">
123+
<input type="radio" name="exampleRadio" data-validation="required"> Radio 3
124+
</label>
125+
</div>
126+
</div>
127+
<button type="submit" class="btn btn-default">Submit</button>
128+
</form>
129+
<hr>
130+
<h2>Horizontal form</h2>
131+
<form class="form-horizontal">
132+
<div class="form-group">
133+
<label class="control-label col-sm-2" >Text</label>
134+
<div class="col-sm-10">
135+
<input type="text" class="form-control" data-validation="required">
136+
</div>
137+
</div>
138+
<div class="form-group">
139+
<label class="control-label col-sm-2">Text</label>
140+
<div class="col-sm-5">
141+
<input type="text" class="form-control" data-validation="required">
142+
</div>
143+
<div class="col-sm-5">
144+
<input type="text" class="form-control" data-validation="required">
145+
</div>
146+
</div>
147+
<div class="form-group">
148+
<label class="control-label col-sm-2">Text</label>
149+
<div class="col-sm-10">
150+
<div class="input-group">
151+
<div class="input-group-addon"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></div>
152+
<input type="text" class="form-control" data-validation="required">
153+
</div>
154+
</div>
155+
</div>
156+
<div class="form-group">
157+
<label class="control-label col-sm-2">Text</label>
158+
<div class="col-sm-5">
159+
<div class="input-group">
160+
<div class="input-group-addon"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></div>
161+
<input type="text" class="form-control" data-validation="required">
162+
</div>
163+
</div>
164+
<div class="col-sm-5">
165+
<div class="input-group">
166+
<div class="input-group-addon"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></div>
167+
<input type="text" class="form-control" data-validation="required">
168+
</div>
169+
</div>
170+
</div>
171+
<div class="form-group">
172+
<label class="control-label col-sm-2">Check</label>
173+
<div class="col-sm-10">
174+
<div class="checkbox">
175+
<label>
176+
<input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 1
177+
</label>
178+
</div>
179+
<div class="checkbox">
180+
<label>
181+
<input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 2
182+
</label>
183+
</div>
184+
<div class="checkbox">
185+
<label>
186+
<input type="checkbox" name="exampleCheckBox" data-validation="required"> CheckBox 3
187+
</label>
188+
</div>
189+
</div>
190+
</div>
191+
<div class="form-group">
192+
<label class="control-label col-sm-2">Select</label>
193+
<div class="col-sm-10">
194+
<div class="radio">
195+
<label>
196+
<input type="radio" name="exampleRadio" data-validation="required"> Radio 1
197+
</label>
198+
</div>
199+
<div class="radio">
200+
<label>
201+
<input type="radio" name="exampleRadio" data-validation="required"> Radio 2
202+
</label>
203+
</div>
204+
<div class="radio">
205+
<label>
206+
<input type="radio" name="exampleRadio" data-validation="required"> Radio 3
207+
</label>
208+
</div>
209+
</div>
210+
</div>
211+
<button type="submit" class="btn btn-default">Submit</button>
212+
</form>
213+
<hr>
214+
</div>
215+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
216+
<script src="../form-validator/jquery.form-validator.js"></script>
217+
<script>
218+
$(function() {
219+
// setup validate
220+
$.validate();
221+
});
222+
</script>
223+
</body>
224+
</html>

0 commit comments

Comments
 (0)