Empty input not highlighted

What could be the problem?

  (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>

  • not enough html code - Stanislav Grot
  • three is equally used with boolean, this is firstly - ikerya
  • added. Yes, with boolean, but this test can be done in such a way - bsuart
  • formElements.input3.value = '' || formElements.input4.value = '' formElements.input3.value = '' || formElements.input4.value = '' - note that you do not compare here and assign - Vyacheslav Danshin

2 answers 2

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

change to

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

to make it work

    Perhaps this is an option that will simplify your code a lot.

     input:required { border: 1px solid green; } input:required:invalid { border: 1px solid red; } 
     <input required type="text" value=""> <input required type="text" value="Value">