<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;
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.