I have two fiels : one is username and other is password.
If an user enters wrong username or password, it must put up a error message below the respective fields.
Please refer me a solution in html of login form validation.
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="../Styles/images/icons/favicon.ico" />
<link rel="stylesheet" type="text/css" href="../Styles/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../Styles/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../Styles/fonts/Linearicons-Free-v1.0.0/icon-font.min.css">
<link rel="stylesheet" type="text/css" href="../Styles/fonts/iconic/css/material-design-iconic-font.min.css">
<link rel="stylesheet" type="text/css" href="../Styles/css/animate.css">
<link rel="stylesheet" type="text/css" href="../Styles/css/util.css">
<link rel="stylesheet" type="text/css" href="../Styles/css/main.css">
</head>
<body style="background-color: #999999;">
<div ng-show="loadingState">
<div class="loading" id="loader"></div>
</div>
<!--<div id="loadingData">Location data here</div>
<div id="find-me">Show my location</div><br />
<p id="status"></p>
<a id="map-link" target="_blank"></a>-->
<div class="limiter">
<div class="container-login100">
<div class="login100-more" style="background-image: url('../Styles/images/bg-01.jpg');">
<div class="login-cont">
<h5>Welcome to</h5>
<h1>ZetekCastings Pvt Ltd.</h1>
<p>Specialized in aluminium pressure die casting, through its unique manufacturing concept and outstanding engineering capability</p>
</div>
</div>
<div class="wrap-login100 p-l-50 p-r-50 p-t-72 p-b-50">
<form name="loginForm" class="login100-form validate-form" novalidate>
<span class="login100-form-title p-b-59">
User Login
</span>
<div class="wrap-input100 validate-input" data-validate="Username is required">
<span class="label-input100">Username</span>
<input class="input100" type="text" name="username" placeholder="Username" ng-model="user.username" required autofocus>
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Password is required">
<span class="label-input100">Password</span>
<input class="input100" type="password" name="pass" placeholder="********" ng-model="user.password" required>
<span class="focus-input100"></span>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn" type="submit" ng-click="login(input)">
Login
</button>
</div>
</div>
<h6 class="pos-fixed bottom-0 mb-4 ml-5"> ZetekCastings @ 2019 All Rights Reserved.</h6>
</form>
</div>
</div>
</div>
</body>
</html>
