<form>
<label for="email"> Email: </label> <br>
<input id="email" type="text"> <br>
</form>
<button class="btn" onclick="validateEntry()">Submit</button>
<div id="console">
</div>
body
{
font-family: 'Droid Sans', sans-serif;
}
#display, #display2, #display3, #console
{
width: 300px;
height: 200px;
padding: 10px 10px 10px 30px;
margin:5px;
background-color: #A7DBD8;
color:#222;
line-height: 50px;
}
#display3
{
line-height: 1.3em
}
#console
{
line-height:16px;
height: 200px;
width: 300px;
}
.btn {
border:0;
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 7;
-moz-border-radius: 7;
border-radius: 7px;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 20px;
background: #3498db;
padding: 10px 20px 10px 20px;
text-decoration: none;
margin:8px;
}
.btn:hover {
background: #3cb0fd;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration: none;
}
input[type='text']
{
border:1px solid #3498db;
height:28px;
padding:4px;
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
margin:8px;
}
.error{ color: red; font-weight: bold; }
function checkUserEntry()
{
var userEntry = document.getElementById('email').value;
if(userEntry.length == 0)
{
throw new Error('please provide an email address');
}
else if(userEntry.indexOf('@')===-1)
{
throw new Error('please provide a valid email address');
}
document.getElementById('console').innerHTML = "<h3 style='color:green'> Your email is: </h3>" + userEntry;
}
function validateEntry()
{
try
{
checkUserEntry();
}
catch(error)
{
document.getElementById('console').innerHTML =
"<h3 style='color:red'> Warning: </h3>" + error.message;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.