<!DOCTYPE html>
<
html
>
<
head
>
<
script
src
=
</
script
>
<
style
>
body {
text-align: center;
}
.contactform-buttons {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
</
style
>
<
script
>
$(document).ready(function () {
$('#submit').click(function (e) {
e.preventDefault();
const name = $('#name').val();
const email = $('#email').val();
if (name === '' || email === '') {
$('#invalid_email').text("Input Fields can not be Empty!!");
$('#invalid_email').css("color", "red");
return false;
}
else if (IsEmail(email) === false) {
$('#invalid_email').text("Entered Email is not Valid!!");
$('#invalid_email').css("color", "red");
return false;
}
else{
$('#invalid_email').text("Entered Email is Valid!!");
$('#invalid_email').css("color", "green");
return true;
}
return false;
});
});
function IsEmail(email) {
const regex =
/^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!regex.test(email)) {
return false;
}
else {
return true;
}
}
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
form
action
=
""
method
=
"post"
id
=
"contactform"
>
<
label
for
=
"name"
>Name:</
label
>
<
input
name
=
"name"
id
=
"name"
type
=
"text"
placeholder
=
"Please enter your name"
class
=
"contact-input"
>
<
br
/><
br
/>
<
label
for
=
"email"
>Email :</
label
>
<
input
name
=
"email"
id
=
"email"
type
=
"text"
placeholder
=
"Please enter your email"
class
=
"contact-input"
>
<
p
class
=
"error"
id
=
"invalid_email"
>
</
p
>
<
br
/>
<
input
type
=
"submit"
class
=
"contactform-buttons"
id
=
"submit"
value
=
"Check email validity"
/>
</
form
>
<
div
id
=
"correct"
style
=
"color:gray;"
>
</
div
>
</
center
>
</
body
>
</
html
>