Skip to content

Instantly share code, notes, and snippets.

@znck

znck/index.html

Last active July 14, 2017 19:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save znck/c01fb1fd33b69621ff044cfe29aaae76 to your computer and use it in GitHub Desktop.
Save znck/c01fb1fd33b69621ff044cfe29aaae76 to your computer and use it in GitHub Desktop.
Download ZIP
jquery demo: JS Bin// source https://jsbin.com/meximo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.group {
display: block;
margin: 0 15px 15px;
}
.group label, .group input {
display: block;
}
.group label {
margin: 4px 0;
}
.group button {
padding: .5rem 1rem;
}
.group input {
width: 100%;
padding: .5rem 1rem;
margin: 4px 0;
}
.group span {
color: red;
}
.group span.warn {
color: yellow;
}
</style>
</head>
<body>
<div id="app">
<form id="signup">
<div class="group">
<label for="#name">Name</label>
<input type="text" id="name" autocomplete="off">
</div>
<div class="group">
<label for="#email">Email</label>
<input type="email" id="email" autocomplete="off">
</div>
<div class="group">
<label for="#password">Password</label>
<input type="password" id="password" autocomplete="off">
</div>
<div class="group">
<button type="submit">Signup</button>
</div>
</form>
</div>
<script src="https://unpkg.com/jquery@3.1.1/dist/jquery.min.js"></script>
<script id="jsbin-javascript">
function validateEmail (email) {
return /^[a-z0-9.]+@gmail\.com$/i.test(email)
}
function validatePasswordVerbose (password) {
return {
hasLower: /[a-z]/.test(password),
hasUpper: /[A-Z]/.test(password),
hasNumber: /[0-9]/.test(password),
hasSpecial: /[~`!@#$%^&*()_+"'.,]/.test(password)
}
}
function validatePassword (password) {
return Object.values(validatePasswordVerbose(password)).every(r => r)
}
function insertWarning (el, warning) {
const $warn = $(el).parent().find('span')
if ($warn.length) $warn.text(warning)
else {
$('<span>').text(warning).appendTo($(el).parent())
}
}
function removeWarning (el) {
$(el).parent().find('span').remove()
}
$(document).ready(function () {
console.log('App started!')
const $name = $('#name')
const $email = $('#email')
const $password = $('#password')
const $signup = $('#signup')
$email.on('input', function () {
if (!validateEmail($email.val())) {
insertWarning($email, 'Your email address is not valid.')
} else {
removeWarning($email)
}
})
$password.on('input', function () {
if (!validatePassword($password.val())) {
const checks = validatePasswordVerbose($password.val())
const messages = [];
!checks.hasLower && messages.push('lower case letter')
!checks.hasUpper && messages.push('upper case letter')
!checks.hasNumber && messages.push('number')
!checks.hasSpecial && messages.push('special character')
insertWarning($password, `Your password is not valid.
It should have atleast one
${messages.join(', ')}.`)
} else {
removeWarning($password)
}
})
$signup.on('submit', function (e) {
e.preventDefault()
$('<pre>').text(`\nPOST /signup\n` + JSON.stringify({
name: $name.val(),
email: $email.val(),
password: $password.val()
}, null, 2)).appendTo($('#app'))
})
})
</script>
<script id="jsbin-source-css" type="text/css">.group {
display: block;
margin: 0 15px 15px;
}
.group label, .group input {
display: block;
}
.group label {
margin: 4px 0;
}
.group button {
padding: .5rem 1rem;
}
.group input {
width: 100%;
padding: .5rem 1rem;
margin: 4px 0;
}
.group span {
color: red;
}
.group span.warn {
color: yellow;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">function validateEmail (email) {
return /^[a-z0-9.]+@gmail\.com$/i.test(email)
}
function validatePasswordVerbose (password) {
return {
hasLower: /[a-z]/.test(password),
hasUpper: /[A-Z]/.test(password),
hasNumber: /[0-9]/.test(password),
hasSpecial: /[~`!@#$%^&*()_+"'.,]/.test(password)
}
}
function validatePassword (password) {
return Object.values(validatePasswordVerbose(password)).every(r => r)
}
function insertWarning (el, warning) {
const $warn = $(el).parent().find('span')
if ($warn.length) $warn.text(warning)
else {
$('<span>').text(warning).appendTo($(el).parent())
}
}
function removeWarning (el) {
$(el).parent().find('span').remove()
}
$(document).ready(function () {
console.log('App started!')
const $name = $('#name')
const $email = $('#email')
const $password = $('#password')
const $signup = $('#signup')
$email.on('input', function () {
if (!validateEmail($email.val())) {
insertWarning($email, 'Your email address is not valid.')
} else {
removeWarning($email)
}
})
$password.on('input', function () {
if (!validatePassword($password.val())) {
const checks = validatePasswordVerbose($password.val())
const messages = [];
!checks.hasLower && messages.push('lower case letter')
!checks.hasUpper && messages.push('upper case letter')
!checks.hasNumber && messages.push('number')
!checks.hasSpecial && messages.push('special character')
insertWarning($password, `Your password is not valid.
It should have atleast one
${messages.join(', ')}.`)
} else {
removeWarning($password)
}
})
$signup.on('submit', function (e) {
e.preventDefault()
$('<pre>').text(`\nPOST /signup\n` + JSON.stringify({
name: $name.val(),
email: $email.val(),
password: $password.val()
}, null, 2)).appendTo($('#app'))
})
})
</script></body>
</html>
Raw
jsbin.meximo.css
.group {
display: block;
margin: 0 15px 15px;
}
.group label, .group input {
display: block;
}
.group label {
margin: 4px 0;
}
.group button {
padding: .5rem 1rem;
}
.group input {
width: 100%;
padding: .5rem 1rem;
margin: 4px 0;
}
.group span {
color: red;
}
.group span.warn {
color: yellow;
}
Raw
jsbin.meximo.js
function validateEmail (email) {
return /^[a-z0-9.]+@gmail\.com$/i.test(email)
}
function validatePasswordVerbose (password) {
return {
hasLower: /[a-z]/.test(password),
hasUpper: /[A-Z]/.test(password),
hasNumber: /[0-9]/.test(password),
hasSpecial: /[~`!@#$%^&*()_+"'.,]/.test(password)
}
}
function validatePassword (password) {
return Object.values(validatePasswordVerbose(password)).every(r => r)
}
function insertWarning (el, warning) {
const $warn = $(el).parent().find('span')
if ($warn.length) $warn.text(warning)
else {
$('<span>').text(warning).appendTo($(el).parent())
}
}
function removeWarning (el) {
$(el).parent().find('span').remove()
}
$(document).ready(function () {
console.log('App started!')
const $name = $('#name')
const $email = $('#email')
const $password = $('#password')
const $signup = $('#signup')
$email.on('input', function () {
if (!validateEmail($email.val())) {
insertWarning($email, 'Your email address is not valid.')
} else {
removeWarning($email)
}
})
$password.on('input', function () {
if (!validatePassword($password.val())) {
const checks = validatePasswordVerbose($password.val())
const messages = [];
!checks.hasLower && messages.push('lower case letter')
!checks.hasUpper && messages.push('upper case letter')
!checks.hasNumber && messages.push('number')
!checks.hasSpecial && messages.push('special character')
insertWarning($password, `Your password is not valid.
It should have atleast one
${messages.join(', ')}.`)
} else {
removeWarning($password)
}
})
$signup.on('submit', function (e) {
e.preventDefault()
$('<pre>').text(`\nPOST /signup\n` + JSON.stringify({
name: $name.val(),
email: $email.val(),
password: $password.val()
}, null, 2)).appendTo($('#app'))
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment