Some tips:
**1-** `id`s are unique in each page. You can not define multiple elements with just one `id`. Instead, You should use `class` attribute`.
**2-** To do something after some seconds, You should use [setTimeout](https://www.w3schools.com/js/js_timing.asp) function
**3-** You must know about jquery selectors and some of its functions. Read available [tutorials](https://www.w3schools.com/jquery/) on the web.
**4-** To validate a value, You must know [Regex](https://www.w3schools.com/jsref/jsref_obj_regexp.asp)
A simple working example of your question is this. Hope it helps
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let time2Hide = 5000;
function f(selector) {
$(selector).show();
setTimeout(() => {
$(selector).hide();
}, time2Hide);
}
f("#warning");
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
function onSubmit() {
let email = $("#email").text()
if(!email) {
f("#information" )
}
else if(validateEmail(email)) {
f("#success");
}
else {
f("#error")
}
}
<!-- language: lang-css -->
/**********************************************/
/* notification styles */
.notification {
position: fixed;
width: 100%;
text-align: center;
z-index: 99;
overflow: hidden;
}
.notification h2 {
font-size: 16px;
font-weight: 400
}
/*#notification.showNote{
width:50%;
left:230px
}*/
/*error, info, notice, alert*/
#success,
#warning,
#error,
#information {
display: none;
position: relative;
padding: 5px 20px
}
#information {
background-color: #3bafda
}
#success {
background-color: #8cc152
}
#warning {
background-color: #f6bb42
}
#error {
background-color: #e9573f
}
.notify h2 {
color: #fff
}
<!-- language: lang-html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="warning" class="notification">
<span>This is default message show first time</span>
</div>
<div id="information" class="notification">
<span>Enter your registered Email ID</span>
</div>
<div id="error" class="notification">
<span>Email ID is incorrect</span>
</div>
<div id="success" class="notification">
<span>Email is correct - good : show me for 5 sec only after I will hide automatically if I am in green else show until cursor inside textbox.</span>
</div>
<hr><br><br><br>
<input type="email" name="email" id="username" />
<input type="phone" name="mobile" id="phone" />
<input type="submit" id="ok" name="done" onclick="onSubmit()"/>
<!-- end snippet -->
Using [regular expressions][1] is probably the best way. You can see a bunch of tests [here][2] (taken from [chromium][3])
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
Here's the example of regular expresion that accepts unicode:
var re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
But keep in mind that one should not rely only upon JavaScript validation. JavaScript can easily be disabled. This should be validated on the server side as well.
Here's an example of the above in action:
<!-- begin snippet: js hide: false console: true -->
<!-- language: lang-js -->
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validate() {
var $result = $("#result");
var email = $("#email").val();
$result.text("");
if (validateEmail(email)) {
$result.text(email + " is valid :)");
$result.css("color", "green");
} else {
$result.text(email + " is not valid :(");
$result.css("color", "red");
}
return false;
}
$("#validate").bind("click", validate);
<!-- language: lang-html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>Enter an email address:</p>
<input id='email'>
<button type='submit' id='validate'>Validate!</button>
</form>
<h2 id='result'></h2>
<!-- end snippet -->
[1]: http://en.wikipedia.org/wiki/Regular_expression
[2]: http://jsfiddle.net/ghvj4gy9/embedded/result,js/
[3]: https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/LayoutTests/fast/forms/resources/ValidityState-typeMismatch-email.js&sq=package:chromium&type=cs
