Кто поможет с выводом ошибки

[SolomonRei]

Нужно,чтобы,если пользователь не ввел имя и фамилию,то выводилось сообщение под обеими полями,если же,он потом исправил,и ввел имя,то имя больше не подчеркивалось красным,а горело только поле фамилия,но у меня почему-то не получается,я проверяю переменную,если пустая то вывожу предупреждение,но до второго if не доходит,потому что я возвращаю return false; Как мне это исправить,чтобы все корректно работало.
Вот код:

<form action = "" method = "post" class = "form_search">
				<div class = "name_form">
					<div id = "lg_err"></div>
					<i><label class = "wrap_name">Имя:</label></i>
					<i><input type = "text" name = "name" placeholder = "Имя ученика" id = "search_name"></i>
				</div>
				<div class = "surname_form">
					<div id = "ps_err"></div>
					<i><label class = "wrap_name">Фамилия:</label></i>
					<i><input type = "text" name = "surname" placeholder = "Фамилия ученика" id = "search_surname"></i>
				</div>
				<div class = "find_form">
					<i><label class = "wrap_name">Найти:</label></i>
					<i><input type = "submit" name = "find" id = "search_button" value = "Найти" onclick = "return SearchHuman()"></i>
				</div>

			</form>

JS

function SearchHuman(){
			var name = document.getElementById('search_name').value;
			var surname = document.getElementById('search_surname').value;

			if(!name && !surname){
				search_name.style.border = '2px solid red';
				document.getElementById('lg_err').innerHTML = '*Введите имя!';

				search_surname.style.border = '2px solid red';
				document.getElementById('ps_err').innerHTML = '*Введите Фамилию!';
				return false;

			}


			if(!surname){
				search_surname.style.border = '2px solid red';
				document.getElementById('ps_err').innerHTML = '*Введите Фамилию!';
                                return false;
				}else{
					search_surname.style.border = 'none';
					ps_err.style.display = 'none';
				}

				
			if(!name){
				search_name.style.border = '2px solid red';
				document.getElementById('lg_err').innerHTML = '*Введите имя!';
                                return false;
				}else{
					search_name.style.border = 'none';
					lg_err.style.display = 'none';
				}
				
			
		}

[Malleys]

https://codepen.io/anon/pen/JLeYrP?editors=1010

[laimas]

<style>
input {
    border: 1px solid #ddd;
}
</style>

<form action="" method="post" class="form_search" oninput="SearchHuman(this.elements)">
                <div class="name_form">
                    <div id="name_err"></div>
                    <i><label class="wrap_name">Имя:</label></i>
                    <input data-err="Введите имя!" type="text" name="name" placeholder="Имя ученика">
                </div>
                <div class="surname_form">
                    <div id="surname_err"></div>
                    <i><label class="wrap_name">Фамилия:</label></i>
                    <input data-err="Введите Фамилию!" type="text" name="surname" placeholder="Фамилия ученика">
                </div>
                <div class="find_form">
                    <i><label class="wrap_name">Найти:</label></i>
                    <input type="submit" name="find" value="Найти">
                </div>
 
            </form>


<script>
function SearchHuman(elm){
    for(var i=0; i<elm.length-1; i++) {
        if(!elm[i].value.trim()) {
            document.getElementById(elm[i].name+'_err').textContent = elm[i].getAttribute('data-err');
            elm[i].style.borderColor = '#f00';
        } else {
            document.getElementById(elm[i].name+'_err').textContent = '';
            elm[i].style.borderColor = '#ddd';
        } 
    } 
}
</script>

<input type = "submit" name = "find" value = "Найти"> - это расточительство, а поля в тегах I бессмыслица.