Untitled

<!Doctype html>
<html>
	<head>
		<title>Email Validation</title>
		<script>
			function getMessage(field, value ){
				if(value.length==0) {
					return field + "Couldn't be blank";
				}
			}
			function setMessage(message) {
				document.getElementById('message').innerHTML=message;
			}
			function checkMessage(message) {
				if(message.length!=0) {
					return true;
				}
			}
			function onValidation(event) {
				console.log(event);
				event.preventDefault();
				var email= document.form.email.value;
				var username = document.form.username.value;
				var password=document.form.password.value;
				var cpassword=document.form.confirmpassword.value;
				var message="";
				var flag=false;
				message=getMessage('Username', username);
				flag=checkMessage(message);
				flag ? setMessage(message): message=getMessage('email', email);
				flag=checkMessage(message);
				flag ? setMessage(message): message=getMessage('password', password);
				flag=checkMessage(message);
				flag ? setMessage(message): message=getMessage('Confirm Password', cpassword);

				if(message.length!=0) {
					flag=true;
				}
				if(!flag && email.indexOf("@") <0 ){
					message = "Email without @ couldnot be valid email";
					flag=true;
				}

				if(!flag && email.indexOf(".")){
					message="Email without . couldnot be a valid email";
					flag=true;
				}
				return;
			}
		</script>
		<style>
			body {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
			b {
				font-size: 24px;
			}
			form {
				    display: flex;
				    flex-direction: column;
				    margin: 20px;
				    padding: 50px;
				    justify-content: center;
				    align-items: center;
				    background: snow;
			}
			.message {

			}
			form>div {
				display:flex;
				flex-direction:column;
				padding:10px;
			}

		</style>
	</head>
	<body>
		<b>Email Validation</b>
		<form name="form" onsubmit="return onValidation(event)">
			<p id="message"style="border-width: 0px; color: red;" class="message"/>
		`	<div>
				<label>Username:</label>
				<input type="text" name="username" style="width: 300px"/>
			</div>
			<div>
				<label>Email:</label>
				<input type="text" name="email" style="width: 300px"/>
			</div>
			<div>
				<label>Password:</label>
				<input type="text" name="password" style="width: 300px"/>
			</div>
			<div>
				<label>Confirm Password:</label>
				<input type="text" name="confirmpassword" style="width: 300px"/>
			</div>

			<div>
				<input type="submit" value="Submit" />
			</div>
		</form>
	</body>
</html>