Wyświetlanie tekstu w kodzie HTML

Witam. Mam formularz z przyciskiem wysyłającym. Po wpisaniu danych następuje walidacja. Chcę aby w przypadku gdy wpiszemy błędne dane w polu pojawił się komunikat, ale nie w okienku popup poprzez alert(), tylko aby komunikat wyświetlił się w kodzie HTML pod formularzem. Udało mi się dojść do tego, że po kliknięciu przycisku z wysłaniem formularza ten tekst pojawiał się przez jakiś ułamek sekundy, ale znikał wraz z odświeżeniem strony. Jedyny sposób który "prawie" działał był taki:

<button type="submit" id="submit1" onclick="validate(); return false">Dodaj</button>

W ten sposób uzyskałem to, że po wysłaniu przycisku komunikat o błędzie nie znikał, ale gdy wpisałem dane do formularza w poprawny sposób to wciśnięcie przycisku nic już nie dawało, nie odświeżało skryptu.
Próbowałem rozwiązać ten problem na różne sposoby: danie pliku JS na sam koniec przed zamknięciem body, użycie onClick, użycie onSubmit, .innerHTML, preventDefault, ale wszystko to na nic, tekst albo nadal znika albo w ogóle się nie pojawia albo zawiesza przycisk.
Pewnie robię gdzieś jakiś głupi błąd. Czy ktoś jest w stanie pokazać mi przykładowo jak to powinno wyglądać?
fragment index.html (używam bootstrapa)

 <form class="form-horizontal" role="form" id="form1">
                              <div class="form-group">
                                  <label for="cena_netto" class="col-sm-2 control-label">Cena netto </label>
                                          <div class="col-sm-10">
                                                 <input  class="form-control" id="cena_netto" placeholder="dawaj cene">
                                          </div>
                                               <span id="cena_netto_validation1"></span>
                              </div>
                              <div class="form-group">
                                   <div class="col-sm-offset-2 col-sm-10">
                                                       <button type="submit" id="submit1" onclick="validate()">Dodaj</button>
                                    </div>
                               </div>
</form>

validation.js

function validate_cena_netto(cena_netto)
{
    if (cena_netto=='')
    {
       alert("Cena netto nie może być pusta"); 
       var element = document.getElementById("cena_netto_validation1");
       element.textContent = "Cena netto nie może być pusta!"
       validated=false;
    }
}
function validate()
{    
   var cena_netto=document.forms['form1'].cena_netto.value;
   validate_cena_netto(cena_netto);
}

$('#form1').on('submit', function(e){
	var validated =	validate();
	if (!validated){
		e.preventDefault();		
	}
});

Z tym, że musisz przerobić funkcję validate tak żeby zwracała prawdę lub fałsz.

Wygląda to tak i nie działa. Pewnie znowu coś pomieszałem :(

validated=true;
function validate_cena_netto(cena_netto)
{
    if (cena_netto=='')
    {
       alert("Cena netto nie może być pusta"); 
       var element = document.getElementById("cena_netto_validation1");
       element.textContent = "Cena netto nie może być pusta!"
       validated=false;
    }
}
function validate()
{    
   var cena_netto=document.forms['form1'].cena_netto.value;
   validate_cena_netto(cena_netto);
   return validated;
}
$('#form1').on('submit', function(e){
    var validated = validate();
    alert("=== ",validated)
    if (!validated){
        e.preventDefault();     
    }
});

Mieszasz zmienne globalne i lokalne. validate niech zwraca prawdę/fałsz na podstawie funkcji validate_cena_netto, która też zwraca prawdę/fałsz. W ten sposób usuniesz zmienną globalną validated..