Skip to content

Instantly share code, notes, and snippets.

@TheAshwanik

TheAshwanik/CSS

Last active December 23, 2015 05:29
Show Gist options
  • Save TheAshwanik/6587312 to your computer and use it in GitHub Desktop.
Save TheAshwanik/6587312 to your computer and use it in GitHub Desktop.
Download ZIP
A Gist for jQuery plugin for Email Address like on FB & Google+? http://jsbin.com/UjOJip/8
Raw
CSS
body{
font-family:Helvetica,Arial;
background:#f4f4f4;
}
h2{
font-weight:normal;
}
#invite{
position:relative;
background:#fff;
border:1px solid #ACACAC;
padding:25px;
margin:15px;
box-shadow:0px 2px 5px #999;
}
#tags{
border:1px solid #E3E3E3;
padding:5px;
}
#tags{
overflow:auto;
border:1px solid #ccc;
padding:5px;
font-family:Arial;
}
#tags span.tag{
border-radius:3px;
border:1px solid #2F8ABD;
font-size:13px;
font-weight:bold;
color:#fff;
cursor:pointer;
display:block;
float:left;
padding:5px;
padding-right:25px;
margin:4px;
background: #62c1f0; /* Old browsers */
background: -moz-linear-gradient(top, #62c1f0 0%, #559ac3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#62c1f0), color-stop(100%,#559ac3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #62c1f0 0%,#559ac3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #62c1f0 0%,#559ac3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #62c1f0 0%,#559ac3 100%); /* IE10+ */
background: linear-gradient(to bottom, #62c1f0 0%,#559ac3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62c1f0', endColorstr='#559ac3',GradientType=0 ); /* IE6-9 */
}
#tags span.tag:hover{
opacity:0.7;
}
#tags span.tag:after{
position:absolute;
content:"×";
font-size:14px;
padding:0 4px;
margin:0 0 10px 5px;
opacity:0.5;
}
#tags span.tag:hover:after{
color:red;
opacity:1;
}
input#email{
/*clear:left;*/
float:left;
background:#eee;
border:0;
margin:4px;
padding:5px;
border:1px solid #ddd;
width:auto;
}
/* VALIDATION */
.invalid{
border: 1px solid red !important;
}
/* SUBMIT BTN */
input#send{
cursor:pointer;
border:0;
margin:10px 0;
padding:15px 35px;
color:#fff;
border-radius:3px;
background:#4C89FD;
}
Raw
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form id="invite">
<h2>Invite people to join you</h2>
<p>Invite people by email.</p>
<div id="tags">
<span class="tag">[email protected]</span>
<span class="tag">[email protected]</span>
<span class="tag">[email protected]</span>
<span class="tag">[email protected]</span>
<input id="email" type="text" value="" placeholder="Add friend's email" />
</div>
<input id="send" type="button" value="SEND">
</form>
</body>
</html>
Raw
JS
function validEmail( val ) {
var regx = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return regx.test(val);
}
$(function(){
var $emailInput = $('#email');
function validateEmailEntry( val ){
var v = val;
// Remove comma from validation, use as separator
if(v.slice(-1) == ',')v = val.substring(0, val.length -1);
if(validEmail(v)) {
$emailInput.val('').removeClass('invalid').before('<span class="tag">'+ v +'</span>');
}else{
$emailInput.addClass('invalid');
}
}
// validate on: Comma, Enter, Focusout
$emailInput.on('keyup focusout', function( e ) {
if(/(188|13)/.test(e.which) || e.type=='focusout')
validateEmailEntry( this.value );
});
// PREVENT ENTER SUBMIT (we use it as separator)
$('#invite').on('keypress', function( e ) {
if(e.which==13) e.preventDefault();
});
$('#tags').on('click','.tag',function(){
if(confirm("Really delete this email?")) $(this).remove();
});
// SUBMIT
$('#send').click(function(){
var data = [];
var $em = $('#tags').find('.tag');
$.each($em, function(){
data.push( $(this).text() );
});
alert( data ); // TEST DATA
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment