проверка полей на заполненость

220
01 февраля 2018, 19:53

Ребят доброй ночи! Подскажите , пишу проверку полей на заполненность в табах, нужно что бы пока поля не заполнены нельзя было переключаться на другой таб. Переключение выполняется кнопкой "Далее"

Вот что навоял, вроде работает но может можно это дело как то сократить?

function check() { 
  var summa = document.getElementById('summa'); 
  var people_num = document.getElementById('people_num'); 
 
  var sobstv_fio = document.getElementById('sobstv_fio'); 
  var date1 = document.getElementById('date1'); 
  var passport = document.getElementById('passport'); 
  var passport_date = document.getElementById('passport_date'); 
  var passport_place = document.getElementById('passport_place'); 
  var passport_kod = document.getElementById('passport_kod'); 
  var index1 = document.getElementById('index1'); 
  var propiska = document.getElementById('propiska'); 
 
  var strah_fio = document.getElementById('strah_fio'); 
  var date2 = document.getElementById('date2'); 
  var passport2 = document.getElementById('passport2'); 
  var passport_date2 = document.getElementById('passport_date2'); 
  var passport_place2 = document.getElementById('passport_place2'); 
  var passport_kod2 = document.getElementById('passport_kod2'); 
  var index2 = document.getElementById('index2'); 
  var propiska2 = document.getElementById('propiska2'); 
 
  var btn = document.getElementById('submit'); 
  var btn2 = document.getElementById('submit2'); 
  var btn3 = document.getElementById('submit3'); 
 
  summa.value != '' && people_num.value != '' ? btn.disabled = false : btn.disabled = true; 
 
  sobstv_fio.value != '' && date1.value != '' && passport.value != '' && 
    passport_date.value != '' && passport_place.value != '' && passport_kod.value != '' && 
    index1.value != '' && propiska.value != '' ? btn2.disabled = false : btn2.disabled = true; 
 
  strah_fio.value != '' && date2.value != '' && passport2.value != '' && 
    passport_date2.value != '' && passport_place2.value != '' && passport_kod2.value != '' && 
    index2.value != '' && propiska2.value != '' ? btn3.disabled = false : btn3.disabled = true; 
 
 
}
<ul class="nav nav-tabs" role="tablist"> 
  <li role="presentation" class="active"><a disabled>Общее</a></li> 
  <li role="presentation" class=""><a disabled>Собственник</a></li> 
  <li role="presentation" class=""><a disabled>Страхователь</a></li> 
  <li role="presentation" class=""><a disabled>Авто</a></li> 
  <li role="presentation" class=""><a disabled>Водитель</a></li> 
  <li role="presentation" class=""><a disabled>Файлы</a></li> 
 
</ul> 
 
<br><br> 
<!-- Tab panes --> 
 
<div class="tab-content"> 
  <div role="tabpanel" class="tab-pane active" id="tab1"> 
    <h4 class="text-center">Стоимость оформления 300р</h4> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Страховка</label> 
      <div class="col-sm-9"> 
        <select class="form-control" name="strahovka" id="strahovka" required> 
						<option value="Ограниченная">Ограниченная</option> 
						<option value="Неограниченная">Неограниченная</option> 
					</select> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Прицеп</label> 
      <div class="col-sm-9"> 
        <select class="form-control" name="pricep" id="pricep" required> 
						<option value="Есть">Есть</option> 
						<option value="Нет">Нет</option> 
					</select> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Категория</label> 
      <div class="col-sm-9"> 
        <select class="form-control" name="category" id="category" required> 
						<option selected="selected" disabled value="Не указано">Не указано</option> 
						<option value="B">B</option> 
						<option value="C">C</option> 
						<option value="D">D</option> 
						<option value="E">E</option> 
					</select> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Кол-во мест в автобусе если автобус,газель</label> 
      <div class="col-sm-9"> 
        <input type="number" name="people_num" id="people_num" onkeyup="check();" onkeypress="check();" onchange="check();" class="form-control" maxlength="255"> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Цель ОСАГО</label> 
      <div class="col-sm-9"> 
        <select class="form-control" name="cel_osago" onchange="check();" required> 
						<option value="Купля-продажа">Купля-продажа</option> 
						<option value="Продление">Продление</option> 
					</select> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Сумма</label> 
      <div class="col-sm-9"> 
        <input type="number" name="summa" onkeyup="check();" onkeypress="check();" onchange="check();" id="summa" class="form-control" maxlength="255" required> 
      </div> 
    </div> 
    <br><br> 
    <div class="form-group text-center"> 
      <button type="button" disabled id="submit" class="btn btn-success btn-next" href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab" data-next="1">Далее</button> 
    </div> 
  </div> 
  <div role="tabpanel" class="tab-pane" id="tab2"> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Собственник ФИО</label> 
      <div class="col-sm-9"> 
        <input type="text" name="sobstv_fio" id="sobstv_fio" onkeyup="check();" onkeypress="check();" onchange="check();" class="form-control" maxlength="255" required> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Дата рождения</label> 
      <div class="col-sm-9"> 
        <input type="text" name="date1" id="date1" onkeyup="check();" onkeypress="check();" onchange="check();" class="form-control mask_date" maxlength="10" required> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Паспорт (серия и номер)</label> 
      <div class="col-sm-9"> 
        <input type="text" name="passport" id="passport" onkeyup="check();" onkeypress="check();" onchange="check();" class="form-control mask_passport" maxlength="12" required> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Дата выдачи паспорта</label> 
      <div class="col-sm-9"> 
        <input type="text" name="passport_date" id="passport_date" onkeyup="check();" onkeypress="check();" onchange="check();" class="form-control mask_date" maxlength="10" required> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Кем выдан</label> 
      <div class="col-sm-9"> 
        <input type="text" name="passport_place" id="passport_place" onkeyup="check();" onkeypress="check();" onchange="check();" class="form-control" maxlength="255" required> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Код подразделения</label> 
      <div class="col-sm-9"> 
        <input type="text" name="passport_kod" id="passport_kod" onkeyup="check();" onkeypress="check();" onchange="check();" class="form-control mask_passport_kod" maxlength="7" required> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Индекс</label> 
      <div class="col-sm-9"> 
        <input type="text" name="index1" id="index1" onkeyup="check();" onkeypress="check();" onchange="check();" class="form-control mask_index" maxlength="7" required> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Прописка (Как в паспорте)</label> 
      <div class="col-sm-9"> 
        <input type="text" name="propiska" id="propiska" onkeyup="check();" onkeypress="check();" onchange="check();" class="form-control" maxlength="255" required> 
      </div> 
    </div> 
    <br><br> 
    <div class="form-group text-center"> 
      <button type="button" class="btn btn-danger btn-next" href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab" data-next="0">Назад</button> 
      <button type="button" onkeyup="check();" onkeypress="check();" onchange="check();" id="submit2" class="btn btn-success btn-next" href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab" data-next="2">Далее</button> 
    </div> 
  </div> 
 
  <div role="tabpanel" class="tab-pane" id="tab3"> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Страхователь ФИО</label> 
      <div class="col-sm-9"> 
        <input type="text" name="strah_fio" id="strah_fio" onkeyup="check();" onkeypress="check();" onchange="check();" class="form-control" maxlength="255" required> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Дата рождения</label> 
      <div class="col-sm-9"> 
        <input type="text" name="date2" id="date2" onkeyup="check();" onkeypress="check();" onchange="check();" class="form-control mask_date" maxlength="10" required> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Паспорт (серия и номер)</label> 
      <div class="col-sm-9"> 
        <input type="text" name="passport2" id="passport2" onkeyup="check();" onkeypress="check();" onchange="check();" class="form-control mask_passport" maxlength="12" required> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Дата выдачи паспорта</label> 
      <div class="col-sm-9"> 
        <input type="text" name="passport_date2" id="passport_date2" onkeyup="check();" onkeypress="check();" onchange="check();" class="form-control mask_date" maxlength="10" required> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Кем выдан</label> 
      <div class="col-sm-9"> 
        <input type="text" name="passport_place2" id="passport_place2" onkeyup="check();" onkeypress="check();" onchange="check();" class="form-control" maxlength="255" required> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Код подразделения</label> 
      <div class="col-sm-9"> 
        <input type="text" name="passport_kod2" id="passport_kod2" onkeyup="check();" onkeypress="check();" onchange="check();" class="form-control mask_passport_kod" maxlength="7" required> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Индекс</label> 
      <div class="col-sm-9"> 
        <input type="text" name="index2" id="index2" onkeyup="check();" onkeypress="check();" onchange="check();" class="form-control mask_index" maxlength="7" required> 
      </div> 
    </div> 
    <div class="form-group"> 
      <label class="col-sm-3 control-label">Прописка</label> 
      <div class="col-sm-9"> 
        <input type="text" name="propiska2" id="propiska2" onkeyup="check();" onkeypress="check();" onchange="check();" class="form-control" maxlength="255" required> 
      </div> 
    </div> 
    <br><br> 
    <div class="form-group text-center"> 
      <button type="button" class="btn btn-danger btn-next" href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab" data-next="1">Назад</button> 
      <button type="button" onkeyup="check();" onkeypress="check();" onchange="check();" id="submit3" class="btn btn-success btn-next" href="#tab4" aria-controls="tab1" role="tab" data-toggle="tab" data-next="3">Далее</button> 
    </div> 
  </div>

Answer 1

Пример был сделан до того, как автор представил свою разметку, но основную логику он демонстрирует.

function toggleTab(){ 
  if (!checkForm()) { 
    alert('Заполните все поля'); 
    return 
  } 
  var tabs = document.querySelectorAll(".tab"); 
  for (var i=0;i<tabs.length-1;i++) { 
    if (tabs[i].classList.contains('active')) { 
      tabs[i].classList.remove('active'); 
      tabs[i+1].classList.add('active'); 
      break; 
    } 
  } 
} 
 
function checkForm() { 
  var fields = document.querySelectorAll(".tab.active input.required"); 
  for (var i=0;i<fields.length;i++) { 
    if (fields[i].value == '') { 
      return false; 
    } 
  } 
  return true; 
}
.tab { 
  display:none; 
} 
.tab.active { 
  display:block; 
}
<div class="tab active"> 
  <input type="text" class="required" placeholder="Tab 1 Field 1" /> 
  <input type="text" class="required" placeholder="Tab 1 Field 2" /> 
  <input type="text" class="required" placeholder="Tab 1 Field 3" /> 
  <input type="text" class="required" placeholder="Tab 1 Field 4" /> 
</div> 
<div class="tab"> 
  <input type="text" class="required" placeholder="Tab 2 Field 1" /> 
  <input type="text" class="required" placeholder="Tab 2 Field 2" /> 
  <input type="text" class="required" placeholder="Tab 2 Field 3" /> 
  <input type="text" class="required" placeholder="Tab 2 Field 4" /> 
</div> 
<div class="tab"> 
  <input type="text" class="required" placeholder="Tab 3 Field 1" /> 
  <input type="text" class="required" placeholder="Tab 3 Field 2" /> 
  <input type="text" class="required" placeholder="Tab 3 Field 3" /> 
  <input type="text" class="required" placeholder="Tab 3 Field 4" /> 
</div> 
<div class="tab"> 
  <input type="text" class="required" placeholder="Tab 4 Field 1" /> 
  <input type="text" class="required" placeholder="Tab 4 Field 2" /> 
  <input type="text" class="required" placeholder="Tab 4 Field 3" /> 
  <input type="text" class="required" placeholder="Tab 4 Field 4" /> 
</div> 
<button type="button" onclick="toggleTab()"> 
  Next 
</button>

READ ALSO
Скрипт вставки данных popup в textarea по клику
javascript

Скрипт вставки данных popup в textarea по клику

Как сделать, чтоб при нажатии на кнопку

 165
Удалить параметр запроса Angular 5
javascript

Удалить параметр запроса Angular 5

Как сделать переход на страницу текущую, но без одного из параметров? Например из wwwexpample

 205
JS, дерево ответов и вопросов [дубликат]
javascript

JS, дерево ответов и вопросов [дубликат]

На данный вопрос уже ответили:

 154
Значения из слайдера
javascript

Значения из слайдера

Помогите пожалуйста, как взять значения и с помощью их скрывать или отображать divы

 230