Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Better form validations
<form>
<div class='row'>
<label for='username'>Username</label>
<div class='info'>
&#8627;
<span class='length'>at least 5 characters long,</span>
<span class='spaces'>no spaces</span>
<div class='availability hidden'>
&#8627;
<span class='error'>name is already taken</span>
</div>
</div>
<input type='text' id='username' placeholder='johnnysmith'>
</div>
<div class='row'>
<label for='password'>Password</label>
<div class='info'>
&#8627;
<span class='length'>at least 5 characters long</span>
</div>
<input type='password' id='password' placeholder='&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;&#9679;'>
</div>
<div class='row'>
<input type='submit' id='submit' value='Register'>
</div>
</form>
// Real-time username checks
$('#username').keyup(function() {
checkSpaces($(this));
checkRemoveLengthError($(this));
checkAvailability($(this));
checkRemovePresenceError($(this));
});
// Real-time password checks
$('#password').keyup(function() {
checkRemoveLengthError($(this));
checkRemovePresenceError($(this));
});
// Check lengths on blur
$('#username, #password').blur(function() {
checkLength($(this));
});
// Check all on submit
$('#submit').click(function(event) {
event.preventDefault();
var valid_username = checkSpaces($('#username')) &&
checkLength($('#username')) &&
checkPresence($('#username')) &&
checkAvailability($('#username'));
var valid_password = checkLength($('#password')) && checkPresence($('#password'));
if (valid_username && valid_password) {
alert('Success!');
}
});
// Error checking functions
function checkSpaces(target) {
var value = target.val();
var label = target.prev('.info').children('.spaces');
if (value.includes(' ')) {
label.addClass('error');
} else {
label.removeClass('error');
return true;
}
}
function checkLength(target) {
var value = target.val();
var label = target.prev('.info').children('.length');
if (value.length > 0 && value.length < 5) {
label.addClass('error');
} else {
label.removeClass('error');
return true;
}
}
function checkRemoveLengthError(target) {
var value = target.val();
var label = target.prev('.info').children('.length');
if (value.length == 0 || value.length >= 5) {
label.removeClass('error');
}
}
function checkAvailability(target) {
// Pseudo AJAX check of whether name is available
var value = target.val();
var label = target.prev('.info').children('.availability');
if (value == 'stelios') {
label.removeClass('hidden');
} else {
label.addClass('hidden');
return true;
}
}
function checkPresence(target) {
var value = target.val();
var label = target.siblings('label');
if (value.length == 0) {
label.addClass('error');
} else {
label.removeClass('error');
return true;
}
}
function checkRemovePresenceError(target) {
var value = target.val();
var label = target.siblings('label');
if (value.length > 0) {
label.removeClass('error');
}
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
body
padding: 20px
font-family: 'Lato', sans-serif
font-weight: 300
color: #000
.hidden
display: none
.error
color: firebrick
font-weight: 700
form
background: #eee
display: inline-block
padding: 0 30px
border-radius: 5px
.row
margin: 30px 0
label
display: block
margin-bottom: 4px
font-weight: 700
.info
font-size: 0.8em
font-weight: 300
input
border: none
border-bottom: 1px solid #000
background: transparent
width: 220px
padding: 5px
margin-top: 5px
font-weight: 400
&:focus
outline: none
&[type=submit]
padding: 10px 0
width: 100%
border: 1px solid #000
cursor: pointer
&:hover
background-color: #000
color: #eee
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.