Untitled

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.inp{display: inline-block; margin-top: 25px; margin-left: 5px; color: #666;}
		input {padding: 5px; outline: none; box-shadow: 0px 0px 5px #888; border: none; margin-left: 25px; margin-top: 25px; color: #666; transition: all 500ms ease;}
		input:focus {box-shadow: 0px 0px 5px #f42424; transition: all 500ms ease;}
		input:hover{background-color: #f8f8f8; transition: all 500ms ease; transform: rotate(3deg);}
	</style>
</head>
<body>
	<form>
		<input type="text" name="name" placeholder="Imię" onchange="validate(0)">
		<input type="text" name="surname" placeholder="Nazwisko" onchange="validate(1)">
		<input type="text" name="date" placeholder="dd-mm-YYYY" onchange="validate(2)">
	</form>

	<div class="inp" name="inp" style="margin-left: 25px;"></div>
	<div class="inp" name="inp" ></div>
	<div class="inp" name="inp" ></div>

	<script type="text/javascript">
		String.prototype.firstLetter = function()
		{
	    	return this.charAt(0).toUpperCase() + this.slice(1);
		}

		function validate(s)
		{
			switch(s)
			{
				case 0:

					var name = document.getElementsByName('name')[0].value;

					if(name == "" || name == null)
					{
						alert("Musisz podać imię");
					}
					else
					{
						name = name.toLowerCase();
						name = name.firstLetter();
						document.getElementsByName('inp')[0].innerHTML = name;
					}

				break;

				case 1:

					var surname = document.getElementsByName('surname')[0].value;

					if(surname == "" || surname == null)
					{
						alert("Musisz podać nazwisko");
					}
					else
					{
						surname = surname.toLowerCase();
						surname = surname.firstLetter();
						document.getElementsByName('inp')[1].innerHTML = surname;
					}

				break;

				case 2:

					var date = document.getElementsByName('date')[0].value;

					var date = date.split("-");

					if(date.length == 3)
					{
						var day = parseInt(date[0]);
						var month = parseInt(date[1]);
						var year = parseInt(date[2]);

						if(day > 31)
						{
							day = 31;
						}
						if(day < 1)
						{
							day = 1;
						}
						if(day < 10)
						{
							day = "0" + day;
						}

						if(month > 12)
						{
							month = 12;
						}
						if(month < 1)
						{
							month = 1;
						}
						if(month < 10)
						{
							month = "0" + month;
						}

						if(year < 0)
						{
							year = year + " p.n.e";
						}
						else
						{
							year = year + " n.e";
						}

						document.getElementsByName('inp')[2].innerHTML = day + "/" +  month + "/" + year;
					}
					else
					{
						alert("Musisz podać odpowiedni format daty");
					}

				break;
			}
		}
	</script>
</body>
</html>