Skip to content

Commit c223946

Browse files
MichalRemisMichalRemis
committed
RemovePlainSimpleForm
1 parent cb98cee commit c223946

10 files changed

Lines changed: 130 additions & 472 deletions

‎dist/simple-form.bootstrap4.esm.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
2323
wrappers: {
2424
"default": {
2525
add: function add(element, settings, message) {
26-
alert('bla');
2726
var wrapperElement = element.parent();
2827
var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
2928

‎dist/simple-form.bootstrap4.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
wrappers: {
3030
"default": {
3131
add: function add(element, settings, message) {
32-
alert('bla');
3332
var wrapperElement = element.parent();
3433
var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
3534

‎dist/simple-form.esm.js‎

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
2323
wrappers: {
2424
"default": {
2525
add: function add(element, settings, message) {
26-
console.log(this);
27-
28-
if (element.is('select') && (element.hasClass('date') || element.hasClass('time'))) {
29-
console.log(this);
30-
}
31-
3226
var wrapper = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
3327
var errorElement = wrapper.find(settings.error_tag + '.' + settings.error_class.replace(/ /g, '.'));
3428

@@ -49,37 +43,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
4943
wrapper.removeClass(settings.wrapper_error_class);
5044
return errorElement.remove();
5145
}
52-
},
53-
multi_select: {
54-
add: function add(element, settings, message) {
55-
var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
56-
var parentElement = element.parent();
57-
var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
58-
59-
if (!errorElement.length) {
60-
errorElement = $('<' + settings.error_tag + '>', {
61-
"class": 'invalid-feedback d-block',
62-
text: message
63-
});
64-
parentElement.after(errorElement);
65-
}
66-
67-
wrapperElement.addClass(settings.wrapper_error_class);
68-
element.addClass('is-invalid');
69-
errorElement.text(message);
70-
},
71-
remove: function remove(element, settings) {
72-
var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
73-
var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
74-
var invalidSiblingExists = element.siblings('.is-invalid').length;
75-
76-
if (!invalidSiblingExists) {
77-
wrapperElement.removeClass(settings.wrapper_error_class);
78-
errorElement.remove();
79-
}
80-
81-
element.removeClass('is-invalid');
82-
}
8346
}
8447
}
8548
};

‎dist/simple-form.js‎

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,6 @@
2929
wrappers: {
3030
"default": {
3131
add: function add(element, settings, message) {
32-
console.log(this);
33-
34-
if (element.is('select') && (element.hasClass('date') || element.hasClass('time'))) {
35-
console.log(this);
36-
}
37-
3832
var wrapper = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
3933
var errorElement = wrapper.find(settings.error_tag + '.' + settings.error_class.replace(/ /g, '.'));
4034

@@ -55,37 +49,6 @@
5549
wrapper.removeClass(settings.wrapper_error_class);
5650
return errorElement.remove();
5751
}
58-
},
59-
multi_select: {
60-
add: function add(element, settings, message) {
61-
var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
62-
var parentElement = element.parent();
63-
var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
64-
65-
if (!errorElement.length) {
66-
errorElement = $('<' + settings.error_tag + '>', {
67-
"class": 'invalid-feedback d-block',
68-
text: message
69-
});
70-
parentElement.after(errorElement);
71-
}
72-
73-
wrapperElement.addClass(settings.wrapper_error_class);
74-
element.addClass('is-invalid');
75-
errorElement.text(message);
76-
},
77-
remove: function remove(element, settings) {
78-
var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
79-
var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
80-
var invalidSiblingExists = element.siblings('.is-invalid').length;
81-
82-
if (!invalidSiblingExists) {
83-
wrapperElement.removeClass(settings.wrapper_error_class);
84-
errorElement.remove();
85-
}
86-
87-
element.removeClass('is-invalid');
88-
}
8952
}
9053
}
9154
};

‎src/main.js‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
1818
wrappers: {
1919
default: {
2020
add (element, settings, message) {
21-
if (element.is('select') && (element.hasClass('date') || element.hasClass('time'))) {
22-
console.log(this.wrappers.multi_select.add(element, settings, message))
23-
}
24-
2521
const wrapper = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'))
2622
let errorElement = wrapper.find(settings.error_tag + '.' + settings.error_class.replace(/ /g, '.'))
2723

@@ -41,34 +37,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
4137
wrapper.removeClass(settings.wrapper_error_class)
4238
return errorElement.remove()
4339
}
44-
},
45-
multi_select: {
46-
add (element, settings, message) {
47-
const wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'))
48-
const parentElement = element.parent()
49-
var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback')
50-
51-
if (!errorElement.length) {
52-
errorElement = $('<' + settings.error_tag + '>', { class: 'invalid-feedback d-block', text: message })
53-
parentElement.after(errorElement)
54-
}
55-
56-
wrapperElement.addClass(settings.wrapper_error_class)
57-
element.addClass('is-invalid')
58-
errorElement.text(message)
59-
},
60-
remove (element, settings) {
61-
const wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'))
62-
const errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback')
63-
64-
const invalidSiblingExists = element.siblings('.is-invalid').length
65-
if (!invalidSiblingExists) {
66-
wrapperElement.removeClass(settings.wrapper_error_class)
67-
errorElement.remove()
68-
}
69-
70-
element.removeClass('is-invalid')
71-
}
7240
}
7341
}
7442
}

‎test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js‎

Lines changed: 130 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ QUnit.module('Validate SimpleForm Bootstrap 4', {
2020
},
2121
validators: {
2222
'user[name]': { presence: [{ message: 'must be present' }], format: [{ message: 'is invalid', 'with': { options: 'g', source: '\\d+' } }] },
23-
'user[username]': { presence: [{ message: 'must be present' }] }
23+
'user[username]': { presence: [{ message: 'must be present' }] },
24+
'user[date_of_birth]': { presence: [{ message: 'must be present' }] },
25+
'user[time_of_birth]': { presence: [{ message: 'must be present' }] }
2426
}
2527
}
2628

@@ -49,8 +51,81 @@ QUnit.module('Validate SimpleForm Bootstrap 4', {
4951
.append(
5052
$('<span>', { 'class': 'input-group-text', text: '@' })))
5153
.append(
52-
$('<input />', { 'class': 'form-control', name: 'user[username]', id: 'user_username', type: 'text' })))))
53-
54+
$('<input />', { 'class': 'form-control', name: 'user[username]', id: 'user_username', type: 'text' }))))
55+
.append($('<div>', {
56+
class:'form-group date required user_date_of_birth'
57+
})
58+
.append($('<label class="form-control-label date required" for="user_date_of_birth_1i">Date of birth <abbr title="required">*</abbr></label>'))
59+
.append($('<div>', {
60+
class: 'd-flex flex-row justify-content-between align-items-center'
61+
})
62+
.append($('<select>', {
63+
id: 'user_date_of_birth_1i',
64+
name: 'user[date_of_birth(1i)]',
65+
class: 'form-control mx-1 date required',
66+
'data-client-side-validations-wrapper': 'vertical_multi_select'
67+
})
68+
.append($('<option value=""></option>'))
69+
.append($('<option value="2015">2015</option>'))
70+
.append($('<option value="2025">2025</option>')))
71+
.append($('<select>', {
72+
id: 'user_date_of_birth_2i',
73+
name: 'user[date_of_birth(2i)]',
74+
class: 'form-control mx-1 date required',
75+
'data-client-side-validations-wrapper': 'vertical_multi_select'
76+
})
77+
.append($('<option value=""></option>'))
78+
.append($('<option value="1">January</option>'))
79+
.append($('<option value="2">February</option>')))
80+
.append($('<select>', {
81+
id: 'user_date_of_birth_3i',
82+
name: 'user[date_of_birth(3i)]',
83+
class: 'form-control mx-1 date required',
84+
'data-client-side-validations-wrapper': 'vertical_multi_select'
85+
})
86+
.append($('<option value=""></option>'))
87+
.append($('<option value="1">1</option>'))
88+
.append($('<option value="2">2</option>'))
89+
.append($('<option value="3">3</option>')))
90+
)
91+
.append('<small class="form-text text-muted">hint text</small>')
92+
)
93+
.append($('<div>', {
94+
class:'form-group time required user_time_of_birth form-group-invalid'
95+
})
96+
.append($('<label class="form-control-label time required" for="user_time_of_birth_4i">Time of birth <abbr title="required">*</abbr></label>'))
97+
.append($('<div>', {
98+
class: 'd-flex flex-row justify-content-between align-items-center'
99+
})
100+
.append('<input type="hidden" id="user_time_of_birth_1i" name="user[time_of_birth(1i)]" value="1">')
101+
.append('<input type="hidden" id="user_time_of_birth_2i" name="user[time_of_birth(2i)]" value="1">')
102+
.append('<input type="hidden" id="user_time_of_birth_3i" name="user[time_of_birth(3i)]" value="1">')
103+
.append($('<select>', {
104+
id: 'user_time_of_birth_4i',
105+
name: 'user[time_of_birth(4i)]',
106+
class: 'form-control mx-1 is-invalid time required',
107+
'data-client-side-validations-wrapper': 'vertical_multi_select'
108+
})
109+
.append($('<option value=""></option>'))
110+
.append($('<option value="00">00</option>'))
111+
.append($('<option value="23">23</option>'))
112+
)
113+
.append(':')
114+
.append($('<select>', {
115+
id: 'user_time_of_birth_5i',
116+
name: 'user[time_of_birth(5i)]',
117+
class: 'form-control mx-1 is-invalid time required',
118+
'data-client-side-validations-wrapper': 'vertical_multi_select'
119+
})
120+
.append($('<option value=""></option>'))
121+
.append($('<option value="00">00</option>'))
122+
.append($('<option value="55">55</option>'))
123+
)
124+
)
125+
.append('<div class="invalid-feedback d-block">Time of birth must be present.</div>')
126+
.append('<small class="form-text text-muted">Hint: At what time you were born?</small>')
127+
)
128+
)
54129
$('form#new_user').validate()
55130
}
56131
})
@@ -99,7 +174,7 @@ for (var i = 0; i < wrappers.length; i++) {
99174
assert.ok(input.parent().hasClass('form-group-invalid'))
100175
assert.ok(label.parent().hasClass('form-group-invalid'))
101176
assert.ok(input.parent().find('div.invalid-feedback:contains("is invalid")').length === 1)
102-
assert.ok(form.find('div.invalid-feedback').length === 1)
177+
assert.ok(input.closest('.form-group').find('div.invalid-feedback').length === 1)
103178
})
104179

105180
QUnit.test(wrapper + ' - Validate input-group', function (assert) {
@@ -116,4 +191,55 @@ for (var i = 0; i < wrappers.length; i++) {
116191
input.trigger('focusout')
117192
assert.ok(input.closest('.input-group').find('div.invalid-feedback').length === 0)
118193
})
194+
195+
QUnit.test(wrapper + ' - Validate date input', function (assert) {
196+
const form = $('form#new_user');
197+
const select_year = form.find('select#user_date_of_birth_1i')
198+
const select_month = form.find('select#user_date_of_birth_2i')
199+
const select_day = form.find('select#user_date_of_birth_3i')
200+
201+
form[0].ClientSideValidations.settings.html_settings.wrapper = wrapper
202+
203+
select_year.trigger('focusout')
204+
select_day.trigger('focusout')
205+
206+
assert.ok(select_year.closest('.form-group').hasClass('form-group-invalid'))
207+
assert.ok(select_month.closest('.form-group').hasClass('form-group-invalid'))
208+
assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 1)
209+
210+
select_year.val(2025).trigger('change').trigger('focusout')
211+
212+
assert.ok(select_year.closest('.form-group').hasClass('form-group-invalid'))
213+
assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 1)
214+
215+
select_month.val(1).trigger('change').trigger('focusout')
216+
select_day.val(1).trigger('change').trigger('focusout')
217+
218+
assert.notOk(select_year.closest('.form-group').hasClass('form-group-invalid'))
219+
assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 0)
220+
})
221+
222+
QUnit.test(wrapper + ' - Validate time input reusing server message', function (assert) {
223+
const form = $('form#new_user');
224+
const select_hour = form.find('select#user_time_of_birth_4i')
225+
const select_minute = form.find('select#user_time_of_birth_5i')
226+
227+
form[0].ClientSideValidations.settings.html_settings.wrapper = wrapper
228+
229+
assert.ok(select_hour.closest('.form-group').hasClass('form-group-invalid'))
230+
assert.ok(select_minute.closest('.form-group').hasClass('form-group-invalid'))
231+
assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 1)
232+
233+
select_hour.val(23).trigger('change').trigger('focusout')
234+
235+
assert.ok(select_hour.closest('.form-group').hasClass('form-group-invalid'))
236+
assert.ok(select_minute.closest('.form-group').hasClass('form-group-invalid'))
237+
assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 1)
238+
239+
select_minute.val(55).trigger('change').trigger('focusout')
240+
241+
assert.notOk(select_hour.closest('.form-group').hasClass('form-group-invalid'))
242+
assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 0)
243+
})
244+
119245
}

0 commit comments

Comments
 (0)