Всем доброго времени суток.
Есть вопрос по оптимизации кода.
Делаю велосипед (очередную валидацию формы), но вопрос только по куску кода.
Задача такая
Есть поля формы,
<input type="text" class="form-control " pattern="" placeholder="">
нужно перебрать все поля и если в поле есть атрибут pattern то нужно его обернуть в обертку и добавить еще несколько блоков. Должно получится так
<div class="val-wrapInput">
<input type="text" class="form-control " placeholder="">
<div class="val-wrapSuccess">
<div class="val-success">
<span class="val-leftSuccess"></span>
<span class="val-rightSuccess"></span>
</div>
</div>
<div class="val-wrapError">
<div class="val-error">
<div class="val-leftError"></div>
<div class="val-rightError"></div>
</div>
</div>
</div>
Сделал так (код на Typescript, но там все понятно, даже понятнее чем на JS):
Метод createElements запускается один раз при загрузке и создает нужные элементы
createElements(){
this.wrapper = document.createElement('div');
this.wrapper.className = 'val-wrapInput';
this.success = document.createElement('div');
this.success.className = 'val-wrapSuccess';
this.success.innerHTML = '<div class="val-success">'
+'<span class="val-leftSuccess"></span>'
+'<span class="val-rightSuccess"></span>'
+'</div>';
this.error = document.createElement('div');
this.error.className = 'val-wrapError';
this.error.innerHTML = '<div class="val-error">'
+'<span class="val-leftError"></span>'
+'<span class="val-rightError"></span>'
+'</div>';
}
А метод addHtml перебирает поля формы клонирует уже созданные элементы предыдущим методом и оборачивает нужные поля в обертку и добавляет дополнительные блоки:
addHtml(){
let input = this.form.getElementsByTagName('input');
for (var i = 0; i < input.length; i++) {
if(input[i].hasAttribute('pattern')) {
let wrapper = this.wrapper.cloneNode(true);
let success = this.success.cloneNode(true);
let error = this.error.cloneNode(true);
wrapper.innerHTML = input[i].outerHTML;
input[i].parentNode.replaceChild(wrapper, input[i]);
wrapper.appendChild(success);
wrapper.appendChild(error);
}
}
}
Все работает, но как то громоздко получилось, или это я к jQuery больше привык не знаю
Буду признателен за подсказки!
