изменение тип ввода цвет wth js onclick

Question

<script> 
function valid() { 
    document.getElementById("name").style.borderColor = "#ef0000"; 
} 
</script> 

<form method="post" action=""> 
<input type="text" name="name" id="name"> 
<input type="submit" onclick="valid()" value="click"> 
</form> 

Почему на земле этот код не работает? Я вижу красную краску, и граница снова находится в исходном состоянии. Я очень прошу прощения, я знаю, что это дубликат (я даже нашел хотя бы одно рабочее решение здесь: http://jsfiddle.net/bcxLz4wh/) Я хочу узнать, что не так с моим кодом и почему он возвращается в исходное состояние.

Answer 1

Он возвращается к исходному состоянию, потому что вы нажимаете кнопку отправки. Поведение по умолчанию - отправить form, обновив страницу. Если вы хотите изменить только border-color, вам необходимо переопределить это поведение по умолчанию. Что-то вроде:

function valid(e) { 
    document.getElementById("name").style.borderColor = "#ef0000"; 
    e.preventDefault(); 
} 


<form method="post" action=""> 
    <input type="text" name="name" id="name"> 
    <input type="submit" onclick="valid(event)" value="click"> 
</form>