Подсвечивание пустых input?

308

26 ноября 2016, 17:50

Не подсвечиваются пустой input

В чем может быть проблема?

 (function() { 
 
   var insertButton = document.getElementById('insertButton'); 
   var showButton = document.getElementById('showButton'); 
 
   var input2 = document.getElementById('input2'); 
 
 
   insertButton.addEventListener('click', insertFunction); 
   showButton.addEventListener('click', showData); 
 
   function insertFunction(event) { 
     event.preventDefault(); 
 
     var inputNew = document.createElement('input'); 
     inputNew.type = 'text'; 
     inputNew.size = '10'; 
     inputNew.value = ''; 
     input2.parentNode.insertBefore(inputNew, input2); 
 
   } 
 
   function showData(event) { 
     event.preventDefault(); 
 
     var formElements = document.getElementById('mainForm'); 
     if (formElements.input1.value === '' || formElements.input2.value === '' || formElements.input3.value = '' || formElements.input4.value = '') { 
       highlightFileds(); 
     } 
 
   } 
 
   function highlightFileds() { 
     var input1 = document.getElementById('input1'); 
     var input2 = document.getElementById('input2'); 
     var input3 = document.getElementById('input3'); 
     var input4 = document.getElementById('input4'); 
 
     if (input1.value === '') { 
       document.getElementById('input1').style.borderColor = 'red'; 
       document.getElementById('input1').style.borderWidth = '1px'; 
     } 
 
     if (input2.value === '') { 
       document.getElementById('input2').style.borderColor = 'red'; 
       document.getElementById('input2').style.borderWidth = '1px'; 
     } 
 
     if (input3.value === '') { 
       document.getElementById('input3').style.borderColor = 'red'; 
       document.getElementById('input3').style.borderWidth = '1px'; 
     } 
 
     if (input4.value === '') { 
       document.getElementById('input4').style.borderColor = 'red'; 
       document.getElementById('input4').style.borderWidth = '1px'; 
     } 
   } 
 
 })();

<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
  <link rel="stylesheet" href="../css/styles.css"> 
</head> 
 
<body> 
  <form id="mainForm"> 
    <div id="div1"> 
      <input type="text" name="input-1" id="input1" value="" size="10px"> 
      <input type="text" name="input-2" id="input2" value="" size="10px"> 
      <input type="text" name="input-3" id="input3" value="" size="10px"> 
      <input type="text" name="input-4" id="input4" value="" size="10px"> 
 
      <select id="listColor"> 
        <option> 
          Зеленый 
        </option> 
        <option> 
          Красный 
        </option> 
        <option> 
          Синий 
        </option> 
        <option> 
          Желтый 
        </option> 
      </select> 
    </div> 
 
    <div id="div2"> 
      <input type="reset" name="Очистка формы"> 
      </td> 
      <button id="showButton">Отобразить данные</button> 
      <button id="insertButton">Вставка текстового поля</button> 
    </div> 
 
  </form> 
 
  <script src="../js/index.controller.js" type="text/javascript"></script> 
</body> 
 
</html>

Answer 1

formElements.input3.value = '' || formElements.input4.value = ''

замените на

formElements.input3.value == '' || formElements.input4.value == ''

чтобы заработало

Answer 2

Возможно вам подойдет такой вариант, что на много упростит ваш код

input:required { 
  border: 1px solid green; 
} 
input:required:invalid { 
  border: 1px solid red; 
}

<input required type="text" value=""> 
 
<input required type="text" value="Value">

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

BabelJS и кириллица

Подскажите, использую следующий код

236

javascript

tinymce 4 как добавить активацию кнопки

Сама кнопка работает нормально, только не активируется, если навести курсор на элемент

331

javascript

Ошибка “No 'Access-Control-Allow-Origin' header is present on the requested resource.” во время кроссдоменного ajax запроса [закрыто]

Пишу приложение на cordovaПытаюсь отправить ajax запрос на сервер

292

javascript

Взаимодействие Lua и JAVA

Вопрос: как осуществить выполнения скрипта Lua в приложении java web?

342