Цвет границы не меняется, если вход пуст

Question

У меня есть простой скрипт, написанный на PHP и Javascript, который меняет цвет рамки поля input, если он пуст.

При использовании ниже код, цвет рамки не изменяется и отображается следующая ошибка:

Uncaught TypeError: Cannot read property 'style' of null

<?php 
if(isset($_POST['submit'])) { 
if(empty($_POST['username'])) { 
echo' 
<script> 
document.getElementById("username").style.border = "1px solid red"; 
</script> 
'; 
} 
} 
?> 

<form method="post"> 
<input type="text" id="username" name="username"> 
<input type="submit" name="submit"> 
</form> 

Answer 1

Вам нужно добавить window.onload = function() {...} в верхней части вашего сценария.

<?php 

if (isset($_POST["submit"])) { 

    if (empty($_POST["username"])) { 

     echo " 
      <script> 
       window.onload = function() { 

        document.getElementById('username').style.border = '1px solid red'; 
       }; 
      </script>"; 
    } 
} 

---

<form method="post"> 
    <input type="text" id="username" name="username"> 
    <input type="submit" name="submit"> 
</form>