Skip to content

Instantly share code, notes, and snippets.

View evanleck's full-sized avatar

Evan Lecklider evanleck

28 followers · 106 following
View GitHub Profile
@evanleck
evanleck / index.html
Last active December 1, 2015 21:48
Customizing Native Form Validation
<html>
<head>
<style>
/* just a little breathing room for screenshots */
body { padding: 40px; }
</style>
<body>
<form>
<input type='email' required name='email'>
<button type='submit'>
@evanleck
evanleck / baseline.js
Created December 1, 2015 21:49
Customizing Native Form Validation
var validateForm = function(submitEvent) {
/* We'll fill this in incrementally. */
};
document.addEventListener('DOMContentLoaded', function() {
var forms = document.querySelectorAll('form');
for (var index = forms.length - 1; index >= 0; index--) {
var form = forms[index];
@evanleck
evanleck / validity.js
Created December 1, 2015 21:50
Customizing Native Form Validation
if (!submitEvent.target.checkValidity()) {
/* oh noes! */
} else {
return true; /* everything's cool, the form is valid! */
}
@evanleck
evanleck / looping.js
Created December 1, 2015 21:51
Customizing Native Form Validation
var form = submitEvent.target,
elements = form.elements;
/* Loop through the elements, looking for an invalid one. */
for (var index = 0, len = elements.length; index < len; index++) {
var element = elements[index];
if (element.willValidate === true && element.validity.valid !== true) {
/* element is invalid, let's do something! */
/* break from our loop */
@evanleck
evanleck / validation-message.js
Created December 1, 2015 21:52
Customizing Native Form Validation
var message = element.validationMessage,
parent = element.parentNode,
div = document.createElement('div');
/* Add our message to a div with class 'validation-message' */
div.appendChild(document.createTextNode(message));
div.classList.add('validation-message');
/* Add our error message just after element. */
parent.insertBefore(div, element.nextSibling);
@evanleck
evanleck / validateForm.js
Created December 1, 2015 21:54
Customizing Native Form Validation
var validateForm = function(submitEvent) {
if (!submitEvent.target.checkValidity()) {
/* Seriously, hold everything. */
submitEvent.preventDefault();
submitEvent.stopImmediatePropagation();
submitEvent.stopPropagation();
var form = submitEvent.target,
elements = form.elements;
@evanleck
evanleck / validationMessageFor.js
Created December 1, 2015 21:56
Customizing Native Form Validation
/*
Determine the best message to return based on validity state.
*/
var validationMessageFor = function(element) {
var name = element.nodeName,
type = element.type,
/* Custom, reused messages. */
emailMessage = "Please enter a valid email address.";
@evanleck
evanleck / layout.erb
Created December 1, 2015 22:00
Cross-Site Request Forgery Prevention in Sinatra
<meta name='csrf-token' content='<%= session[:csrf] %>'>
@evanleck
evanleck / csrf.coffee
Created December 1, 2015 22:01
Cross-Site Request Forgery Prevention in Sinatra
$(document).on 'submit', 'form', ->
form = $(this)
method = form.attr('method').toUpperCase()
token = $('meta[name=csrf-token]').attr('content')
# add the CSRF token as a hidden input to the form
if method? and method isnt 'GET'
form.prepend $('<input>', name: '_csrf', type: 'hidden', value: token)
@evanleck
evanleck / sinatra.rb
Created December 1, 2015 22:02
Cross-Site Request Forgery Prevention in Sinatra
before do
session[:csrf] ||= SecureRandom.hex(32)
response.set_cookie 'authenticity_token', {
value: session[:csrf],
expires: Time.now + (60 * 60 * 24 * 180), # that's 180 days
path: '/',
httponly: true
# secure: true # if you have HTTPS (and you should) then enable this