проверка input
 

Здравствуйте! Делаю текстовый редактор на JS и мне нужно создавать таблицу и список по введенных пользователям данным. Нужно сделать проверку данных которые вводит пользователь.

<div class="wrapper style">
		<h1>Choose whant to add:</h1>
		<!--переключатель между созданием таблицы и списка-->
		<form action="#" name="butCuuseF">
			<input type="radio" name="r" id="table" checked>Table
			<input type="radio" name="r" id="list">List 
		</form>
		<!--Данные для создания таблицы-->
		<div class="tableStyle">
			<form action="#" name="rTable">
				<p>Input count of row:
					<input type="text" id="row" class="rowCell typeTxtTab"><span class="result"></span>
				</p>
				<p>Input count of cell:
					<input type="text" id="cell" class="rowCell typeTxtTab"><span class="result"></span>
				</p>
			</form>
			<form action="#" name="rTable">
			<h3>Table style:</h3>
				<p>Input width of cell:
					<input type="text" id="wCell" class="rowCell typeTxtTab"><span class="result"></span>
				</p>
				<p>Input height of cell:
					<input type="text" id="hCell" class="rowCell typeTxtTab"><span class="result"></span>
				</p>
			</form>
			<form action="#" name="rTable">
				<p>Border width:
					<input type="text" id="borderW" class="rowCell typeTxtTab"><span class="result"></span> 
					Border type:
					<select class="typeBorder">
						<option>dotted</option>
						<option>dashed</option>
						<option>solid</option>
						<option>double</option>
						<option>groove</option>
						<option>ridge</option>
						<option>inset</option>
						<option>outset</option>
					</select> 
					Border color:
					<select class="colorBorder">
						<option>Yellow</option>
						<option>IndianRed</option>
						<option>Salmon</option>
						<option>DarkViolet</option>
						<option>Blue</option>
						<option>LightBlue</option>
						<option>Red</option>
						<option>Maroon</option>
					</select>
					Border-collapse:
					<select class="borderCollapse">
						<option>collapse</option>
						<option>separate</option>
					</select>
				</p>
			</form>
		</div>
		<!--Данные для создания списка-->
		<div class="styleList">
			<form action="#" name="rList">
				<p class="typeMarker">
						<input type="button" value="Number" id="number" class="button">
						<input type="button" value="Marker" id="mark" class="button">
				</p>
				<p class="countListItem">Input count of lif item:
					<input type="text" id="countItem" class="rowCell typeTxt"><span class="result"></span>
				</p>
				<p class="TypeOfMark">
					Type of mark:
					<select class="typeMark">
						<option>circle</option>
						<option>disc</option>
						<option>square</option>
						<option>none</option>
					</select>
					<select class="typeNumber">
						<option>decimal</option>
						<option>decimal-leading-zero</option>
						<option>lower-alpha</option>
						<option>lower-greek</option>
						<option>armenian</option>
						<option>georgian</option>
						<option>lower-roman</option>
						<option>upper-alpha</option>
						<option>upper-roman</option>
						<option>none</option>
					</select>
				</p>
			</form>
		</div>
		<!--Кнопка создания таблицы и возвращения к редактору-->
		<div>
		<form action="#">
				<input type="button" value="Create" id="create" class="button"> 
				<input type="button" value="Back" id="back" class="button">
		</form>
		</div>

var id = function (a) {
	return document.getElementById(a);
};
var sel = function (a) {
	return document.querySelector(a);
};

function back() { // скрывает блок создания таблицы и списка и возвращает редактор
	sel('.main').style.display = 'flex';
	sel('.wrapper').style.display = 'none';
}
id('back').addEventListener('click', back); //
id('create').addEventListener('click', function () { 
	/*сменные для создания таблицы*/
	var td = id('cell').value;
	var tr = id('row').value;
	var wTd = id('wCell').value;
	var hTd = id('hCell').value;
	var borderW = id('borderW').value;
	var typeBorder = sel('.typeBorder').value;
	var colorBorder = sel('.colorBorder').value;
	var borderCollapse = sel('.borderCollapse').value;
	/*создание таблицы*/
	var tableCreate = `<table style ="border: ${borderW}px ${typeBorder} ${colorBorder}; border-collapse: ${borderCollapse};">`;
	for (var i = 0; i < tr; i++) {
		tableCreate += "<tr>";
		for (var j = 0; j < td; j++) {
			tableCreate += `<td style = "border: ${borderW}px ${typeBorder} ${colorBorder}; width: ${wTd}px; height: ${hTd}px; border-collapse: ${borderCollapse};"></td>`;
		}
		tableCreate += '</tr>';
	}
	tableCreate += '</table>';
	sel('.textTarea').value += tableCreate;
	sel('.wrapper').style.display = 'none';
	sel('.main').style.display = 'flex';
});
id('mark').addEventListener('click', function () { // создание маркированного списка 
	sel('.countListItem').style.display = 'block';
	sel('.typeNumber').style.display = 'none';
	sel('.TypeOfMark').style.display = 'block';
	sel('.typeMark').style.display = 'block';
	id('create').addEventListener('click', function () {
		var coutItem = id('countItem').value;
		var typeMark = sel('.typeMark').value;
		var itemCreate = `<ul>`;
		for (var i = 0; i < coutItem; i++) {
			itemCreate += `<li style = "list-style-type: ${typeMark}"></li>`
		}
		itemCreate += `</ul>`
		sel('.textTarea').value += itemCreate;
		sel('.wrapper').style.display = 'none';
		sel('.main').style.display = 'flex';
	});
});
id('number').addEventListener('click', function () { // создание нумерованного списка
	sel('.countListItem').style.display = 'block';
	sel('.typeNumber').style.display = 'block';
	sel('.TypeOfMark').style.display = 'block';
	sel('.typeMark').style.display = 'none';
	id('create').addEventListener('click', function () {
		var coutItem = id('countItem').value;
		var typeNumber = sel('.typeNumber').value;
		var itemCreate = `<ol>`;
		for (var i = 0; i < coutItem; i++) {
			itemCreate += `<li style = "list-style-type: ${typeNumber}"></li>`
		}
		itemCreate += `</ol>`
		sel('.textTarea').value += itemCreate;
		sel('.wrapper').style.display = 'none';
		sel('.main').style.display = 'flex';
	});
});
// проверка input
var value = sel('.typeTxtTab').value;
var selAll = document.querySelectorAll('.typeTxtTab');
for (var i = 0; i <= selAll.length; i++) {
selAll[i].addEventListener('blur', function(){
		if (this.value <=0 || this.value > 99) {
			this.style.border = '2px solid red';
			this.nextElementSibling.innerHTML = 'number must be > 0 and < 100';
			this.nextElementSibling.style.color = 'red';
			id('create').disabled = 1;
		}
		else if (this.value != this.value * 1) {
			this.style.border = '2px solid red';
			this.nextElementSibling.innerHTML = ' enter number, not later!';
			this.nextElementSibling.style.color = 'red';
			id('create').disabled = 1;
		}
		else {
			this.style.border = '2px solid green';
			this.nextElementSibling.innerHTML = ' done';
			this.nextElementSibling.style.color = 'green';
			id('create').disabled = 0;
		}	
});
};

проблема в том что если вводишь несколько импутов не верно, а несколько верно все равно создает таблицу и список как выйти с этой проблемы только с помощью чистого JS?

addEventListener('blur' ... может все-таки определить по условиям значение и один раз this.style.border ..., а не трижды переписывать все?

Anna_Medvid,
проверить перед созданием style.color нужных элементов - все зелёные тогда создаём
и на всякий случай -- не бывает элементов с индексом равной length, строка 76 убрать красное

Рони, что ты имеешь в веду "проверить перед созданием style.color нужных элементов"? Как это делать?

Anna_Medvid,

// проверка input
var value = sel('.typeTxtTab').value;
var selAll = document.querySelectorAll('.typeTxtTab');
for (var i = 0; i < selAll.length; i++) {
selAll[i].addEventListener('blur', function(){
    if (this.value <=0 || this.value > 99) {
      this.style.border = '2px solid red';
      this.nextElementSibling.innerHTML = 'number must be > 0 and < 100';
      this.nextElementSibling.style.color = 'red';
      id('create').disabled = 1;
    }
    else if (this.value != this.value * 1) {
      this.style.border = '2px solid red';
      this.nextElementSibling.innerHTML = ' enter number, not later!';
      this.nextElementSibling.style.color = 'red';
      id('create').disabled = 1;
    }
    else {
      this.style.border = '2px solid green';
      this.nextElementSibling.innerHTML = ' done';
      this.nextElementSibling.style.color = 'green';
     // id('create').disabled = 0;
    };
    var ok = [].every.call( selAll, function(el) {
  return el.nextElementSibling.style.color == 'green'

  });
   ok ? id('create').removeAttribute('disabled') : id('create').setAttribute('disabled', 'disabled')

});

Что это делает?
"[].every.call"

я просто только учусь

Anna_Medvid,
тоже что for (var i = 0; i < selAll.length; i++) + все проверки должны вернуть true;
selAll - не массив но можно применить методы массива.
#every-some
#коллекции-не-массивы

А как сделать так что бы после нажатия на кнопку "create" все input очищались?

Anna_Medvid,
:-?

id('create').addEventListener('click', function () {
[].forEach.call( document.querySelectorAll('.typeTxtTab'), function(el) {
       el.value = ""
});


//

Спасибо огромное!!:dance: