Untitled


<!DOCTYPE>

<html>
	<head>
		<title> HTML formulari </title>
		<meta charset='utf-8'>
		<style type='text/css'>
			label{
				font-weight: bold;
			}
            input[type="text"]:valid{
                border: 2px solid green;
            }
            input[type="text"]:invalid{
                border: 2px solid red;
            }

		</style>

		<!-- <script type='text/javascript' src='spljnijs.js'> </script> -->
	</head>

	<body>

		<p id='p1' class='lepi_pasus'> Prvi pasus </p>
		<p> Drugi pasus </p>
		<p class='lepi_pasus'> Treci pasus </p>
        <form id="f">
	       <input type="button" value="test dugme" id="testDugme">
            username: <input type="text" id="username">
            <span id="username_err"></span>
            <br>
             <input type="submit" value="test dugme2" id="testDugme2">
        </form>
		<script type='text/javascript'>


		var pasusi=document.getElementsByClassName('lepi_pasus');
        var pasusi2 = document.querySelectorAll(".lepi_pasus");

        var testDugme = document.querySelector("#testDugme");
            testDugme.onclick = function(){
                window.alert("KLIKNI ME");
            }
        var f=document.querySelector("#f");
            f.onsubmit=function(){
                var username = document.querySelector("#username").value;
                if(username==""){
                    username_err.textContent="Obavezno je ime";
                    username_err.className="error";
                    window.alert("ne moze prazno picko");
                    return false;
                }
                else{
                    username_err.textContent="";
                    username_err.className="";
                }
                return true;
            }
            picko
		console.log("Broj pasusa:" + pasusi[1].textContent);


		/* */

		</script>

	</body>

</html>