<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
crossorigin
=
"anonymous"
>
<
script
src
=
</
script
>
<
style
>
form {
border: 2px solid black;
border-radius:12px;
width: 50%;
padding: 20px;
background-color:#fffa86;
}
label {
color:brown;
font-weight:bold;
}
input {
border: 2px solid grey;
border-radius:12px;
padding: 5px;
margin: 10px;
outline:none;
}
.myelement {
visibility: hidden;
}
.isempty:after {
content:"<
i
style
=
'color:red;'
class
=
'fas fa-thumbs-down'
></
i
>"
}
.emptynot:after {
content:"<
i
style
=
'color:green;'
class
=
'fas fa-thumbs-up'
></
i
>"
}
</
style
>
</
head
>
<
body
>
<
h3
>
Validation alert if input field empty
</
h3
>
<
form
>
<
div
id
=
"input1"
>
<
label
><
em
>Enter Name:</
em
></
label
>
<
input
type
=
"text"
name
=
"name"
required
autocomplete
=
"off"
>
<
i
style
=
'color:grey;'
class
=
'fas '
></
i
>
</
div
>
<
br
>
<
div
id
=
"input2"
>
<
label
><
em
>Enter Password:</
em
></
label
>
<
input
type
=
"password"
name
=
"pwd"
required
autocomplete
=
"off"
>
<
i
style
=
'color:grey;'
class
=
'fas '
></
i
>
</
div
>
<
br
>
<
div
id
=
"input3"
>
<
label
><
em
>Enter Email Id:</
em
></
label
>
<
input
type
=
"email"
name
=
"eid"
required
autocomplete
=
"off"
>
<
i
style
=
'color:grey;'
class
=
'fas '
></
i
>
</
div
>
</
form
>
<
script
>
$(document).ready(function() {
$('div input').focusout(function() {
if($(this).val()=='' ) {
var error=$(this).siblings('i');
error.addClass("fa-thumbs-up").css('color', 'red');
}
else {
var correct=$(this).siblings('i');
correct.addClass("fa-thumbs-up").css('color', 'green');
}
}).trigger("focusout");
});
</
script
>
</
body
>
</
html
>