Skip to content

Commit

Permalink
RemovePlainSimpleForm
Browse files Browse the repository at this point in the history
  • Loading branch information
@MichalRemis
MichalRemis committed Apr 28, 2020
1 parent 5dbb4d4 commit d40e9ae
Show file tree
Hide file tree
Showing 10 changed files with 130 additions and 472 deletions.
1 change: 0 additions & 1 deletion dist/simple-form.bootstrap4.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
wrappers: {
"default": {
add: function add(element, settings, message) {
alert('bla');
var wrapperElement = element.parent();
var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');

Expand Down
1 change: 0 additions & 1 deletion dist/simple-form.bootstrap4.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
wrappers: {
"default": {
add: function add(element, settings, message) {
alert('bla');
var wrapperElement = element.parent();
var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');

Expand Down
37 changes: 0 additions & 37 deletions dist/simple-form.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
wrappers: {
"default": {
add: function add(element, settings, message) {
console.log(this);

if (element.is('select') && (element.hasClass('date') || element.hasClass('time'))) {
console.log(this);
}

var wrapper = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
var errorElement = wrapper.find(settings.error_tag + '.' + settings.error_class.replace(/ /g, '.'));

Expand All @@ -49,37 +43,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
wrapper.removeClass(settings.wrapper_error_class);
return errorElement.remove();
}
},
multi_select: {
add: function add(element, settings, message) {
var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
var parentElement = element.parent();
var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');

if (!errorElement.length) {
errorElement = $('<' + settings.error_tag + '>', {
"class": 'invalid-feedback d-block',
text: message
});
parentElement.after(errorElement);
}

wrapperElement.addClass(settings.wrapper_error_class);
element.addClass('is-invalid');
errorElement.text(message);
},
remove: function remove(element, settings) {
var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
var invalidSiblingExists = element.siblings('.is-invalid').length;

if (!invalidSiblingExists) {
wrapperElement.removeClass(settings.wrapper_error_class);
errorElement.remove();
}

element.removeClass('is-invalid');
}
}
}
};
37 changes: 0 additions & 37 deletions dist/simple-form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,6 @@
wrappers: {
"default": {
add: function add(element, settings, message) {
console.log(this);

if (element.is('select') && (element.hasClass('date') || element.hasClass('time'))) {
console.log(this);
}

var wrapper = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
var errorElement = wrapper.find(settings.error_tag + '.' + settings.error_class.replace(/ /g, '.'));

Expand All @@ -55,37 +49,6 @@
wrapper.removeClass(settings.wrapper_error_class);
return errorElement.remove();
}
},
multi_select: {
add: function add(element, settings, message) {
var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
var parentElement = element.parent();
var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');

if (!errorElement.length) {
errorElement = $('<' + settings.error_tag + '>', {
"class": 'invalid-feedback d-block',
text: message
});
parentElement.after(errorElement);
}

wrapperElement.addClass(settings.wrapper_error_class);
element.addClass('is-invalid');
errorElement.text(message);
},
remove: function remove(element, settings) {
var wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'));
var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback');
var invalidSiblingExists = element.siblings('.is-invalid').length;

if (!invalidSiblingExists) {
wrapperElement.removeClass(settings.wrapper_error_class);
errorElement.remove();
}

element.removeClass('is-invalid');
}
}
}
};
Expand Down
32 changes: 0 additions & 32 deletions src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
wrappers: {
default: {
add (element, settings, message) {
if (element.is('select') && (element.hasClass('date') || element.hasClass('time'))) {
console.log(this.wrappers.multi_select.add(element, settings, message))
}

const wrapper = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'))
var errorElement = wrapper.find(settings.error_tag + '.' + settings.error_class.replace(/ /g, '.'))

Expand All @@ -41,34 +37,6 @@ ClientSideValidations.formBuilders['SimpleForm::FormBuilder'] = {
wrapper.removeClass(settings.wrapper_error_class)
return errorElement.remove()
}
},
multi_select: {
add (element, settings, message) {
const wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'))
const parentElement = element.parent()
var errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback')

if (!errorElement.length) {
errorElement = $('<' + settings.error_tag + '>', { class: 'invalid-feedback d-block', text: message })
parentElement.after(errorElement)
}

wrapperElement.addClass(settings.wrapper_error_class)
element.addClass('is-invalid')
errorElement.text(message)
},
remove (element, settings) {
const wrapperElement = element.closest(settings.wrapper_tag + '.' + settings.wrapper_class.replace(/ /g, '.'))
const errorElement = wrapperElement.find(settings.error_tag + '.invalid-feedback')

const invalidSiblingExists = element.siblings('.is-invalid').length
if (!invalidSiblingExists) {
wrapperElement.removeClass(settings.wrapper_error_class)
errorElement.remove()
}

element.removeClass('is-invalid')
}
}
}
}
134 changes: 130 additions & 4 deletions test/javascript/public/test/form_builders/validateSimpleFormBootstrap4.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ QUnit.module('Validate SimpleForm Bootstrap 4', {
},
validators: {
'user[name]': { presence: [{ message: 'must be present' }], format: [{ message: 'is invalid', 'with': { options: 'g', source: '\\d+' } }] },
'user[username]': { presence: [{ message: 'must be present' }] }
'user[username]': { presence: [{ message: 'must be present' }] },
'user[date_of_birth]': { presence: [{ message: 'must be present' }] },
'user[time_of_birth]': { presence: [{ message: 'must be present' }] }
}
}

Expand Down Expand Up @@ -49,8 +51,81 @@ QUnit.module('Validate SimpleForm Bootstrap 4', {
.append(
$('<span>', { 'class': 'input-group-text', text: '@' })))
.append(
$('<input />', { 'class': 'form-control', name: 'user[username]', id: 'user_username', type: 'text' })))))

$('<input />', { 'class': 'form-control', name: 'user[username]', id: 'user_username', type: 'text' }))))
.append($('<div>', {
class:'form-group date required user_date_of_birth'
})
.append($('<label class="form-control-label date required" for="user_date_of_birth_1i">Date of birth <abbr title="required">*</abbr></label>'))
.append($('<div>', {
class: 'd-flex flex-row justify-content-between align-items-center'
})
.append($('<select>', {
id: 'user_date_of_birth_1i',
name: 'user[date_of_birth(1i)]',
class: 'form-control mx-1 date required',
'data-client-side-validations-wrapper': 'vertical_multi_select'
})
.append($('<option value=""></option>'))
.append($('<option value="2015">2015</option>'))
.append($('<option value="2025">2025</option>')))
.append($('<select>', {
id: 'user_date_of_birth_2i',
name: 'user[date_of_birth(2i)]',
class: 'form-control mx-1 date required',
'data-client-side-validations-wrapper': 'vertical_multi_select'
})
.append($('<option value=""></option>'))
.append($('<option value="1">January</option>'))
.append($('<option value="2">February</option>')))
.append($('<select>', {
id: 'user_date_of_birth_3i',
name: 'user[date_of_birth(3i)]',
class: 'form-control mx-1 date required',
'data-client-side-validations-wrapper': 'vertical_multi_select'
})
.append($('<option value=""></option>'))
.append($('<option value="1">1</option>'))
.append($('<option value="2">2</option>'))
.append($('<option value="3">3</option>')))
)
.append('<small class="form-text text-muted">hint text</small>')
)
.append($('<div>', {
class:'form-group time required user_time_of_birth form-group-invalid'
})
.append($('<label class="form-control-label time required" for="user_time_of_birth_4i">Time of birth <abbr title="required">*</abbr></label>'))
.append($('<div>', {
class: 'd-flex flex-row justify-content-between align-items-center'
})
.append('<input type="hidden" id="user_time_of_birth_1i" name="user[time_of_birth(1i)]" value="1">')
.append('<input type="hidden" id="user_time_of_birth_2i" name="user[time_of_birth(2i)]" value="1">')
.append('<input type="hidden" id="user_time_of_birth_3i" name="user[time_of_birth(3i)]" value="1">')
.append($('<select>', {
id: 'user_time_of_birth_4i',
name: 'user[time_of_birth(4i)]',
class: 'form-control mx-1 is-invalid time required',
'data-client-side-validations-wrapper': 'vertical_multi_select'
})
.append($('<option value=""></option>'))
.append($('<option value="00">00</option>'))
.append($('<option value="23">23</option>'))
)
.append(':')
.append($('<select>', {
id: 'user_time_of_birth_5i',
name: 'user[time_of_birth(5i)]',
class: 'form-control mx-1 is-invalid time required',
'data-client-side-validations-wrapper': 'vertical_multi_select'
})
.append($('<option value=""></option>'))
.append($('<option value="00">00</option>'))
.append($('<option value="55">55</option>'))
)
)
.append('<div class="invalid-feedback d-block">Time of birth must be present.</div>')
.append('<small class="form-text text-muted">Hint: At what time you were born?</small>')
)
)
$('form#new_user').validate()
}
})
Expand Down Expand Up @@ -99,7 +174,7 @@ for (var i = 0; i < wrappers.length; i++) {
assert.ok(input.parent().hasClass('form-group-invalid'))
assert.ok(label.parent().hasClass('form-group-invalid'))
assert.ok(input.parent().find('div.invalid-feedback:contains("is invalid")').length === 1)
assert.ok(form.find('div.invalid-feedback').length === 1)
assert.ok(input.closest('.form-group').find('div.invalid-feedback').length === 1)
})

QUnit.test(wrapper + ' - Validate input-group', function (assert) {
Expand All @@ -116,4 +191,55 @@ for (var i = 0; i < wrappers.length; i++) {
input.trigger('focusout')
assert.ok(input.closest('.input-group').find('div.invalid-feedback').length === 0)
})

QUnit.test(wrapper + ' - Validate date input', function (assert) {
const form = $('form#new_user');
const select_year = form.find('select#user_date_of_birth_1i')
const select_month = form.find('select#user_date_of_birth_2i')
const select_day = form.find('select#user_date_of_birth_3i')

form[0].ClientSideValidations.settings.html_settings.wrapper = wrapper

select_year.trigger('focusout')
select_day.trigger('focusout')

assert.ok(select_year.closest('.form-group').hasClass('form-group-invalid'))
assert.ok(select_month.closest('.form-group').hasClass('form-group-invalid'))
assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 1)

select_year.val(2025).trigger('change').trigger('focusout')

assert.ok(select_year.closest('.form-group').hasClass('form-group-invalid'))
assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 1)

select_month.val(1).trigger('change').trigger('focusout')
select_day.val(1).trigger('change').trigger('focusout')

assert.notOk(select_year.closest('.form-group').hasClass('form-group-invalid'))
assert.ok(select_year.closest('.form-group').find('div.invalid-feedback').length === 0)
})

QUnit.test(wrapper + ' - Validate time input reusing server message', function (assert) {
const form = $('form#new_user');
const select_hour = form.find('select#user_time_of_birth_4i')
const select_minute = form.find('select#user_time_of_birth_5i')

form[0].ClientSideValidations.settings.html_settings.wrapper = wrapper

assert.ok(select_hour.closest('.form-group').hasClass('form-group-invalid'))
assert.ok(select_minute.closest('.form-group').hasClass('form-group-invalid'))
assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 1)

select_hour.val(23).trigger('change').trigger('focusout')

assert.ok(select_hour.closest('.form-group').hasClass('form-group-invalid'))
assert.ok(select_minute.closest('.form-group').hasClass('form-group-invalid'))
assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 1)

select_minute.val(55).trigger('change').trigger('focusout')

assert.notOk(select_hour.closest('.form-group').hasClass('form-group-invalid'))
assert.ok(select_hour.closest('.form-group').find('div.invalid-feedback').length === 0)
})

}
Loading

0 comments on commit d40e9ae

Please sign in to comment.