tell me how to highlight the field frame in red for 5 seconds if an error was made in the field

<span>Фамилия получателя</span> <input type="text" size="90px" id="surname"><br> <input type="button" value="Сохранить" onclick="go()"> <script> function go() { var snl = document.getElementById('surname').value.length; if (snl == 0) { alert("все поля должны быть заполнены"); document.getElementById('surname').focus(); return; } } </script> 

    1 answer 1

     function go() { var el = document.getElementById('surname'); var snl = el.value.length; if (snl == 0) { alert("все поля должны быть заполнены"); el.classList.add("warning"); el.focus(); setTimeout(function() { el.classList.remove("warning"); }, 2000); } } 
     .warning { border-color: red; } 
     <span>Фамилия получателя</span> <input type="text" size="90px" id="surname"><br> <input type="button" value="Сохранить" onclick="go()"> 

    • What does the arrow "=>" mean before el.classList.remove ("warning")? - Roman Romashko
    • and I also wanted to know when you assigned the variable var snl to the value el.value.length; then you assigned the value and length at the same time, I suppose? - Roman Romashko
    • @RomanRomashko Actually, this is your line). In this line, the length of the string ....value.length written to the variable snl . - Igor
    • I apologize then, I’m just rewriting the meaning many times already, so it may be wrong somewhere - Roman Romashko