Skip to content

Instantly share code, notes, and snippets.

@maxxcrawford
Last active December 28, 2015 22:33
Show Gist options
  • Save maxxcrawford/f2d843f5f7267620056a to your computer and use it in GitHub Desktop.
Save maxxcrawford/f2d843f5f7267620056a to your computer and use it in GitHub Desktop.
Parsley Validation – Adds overlay once the form is successfully submitted to stop user from selecting submit multiple times.
.parsley, .webform-client-form .form-item .parsley {
&-success {
outline: 1px solid $green;
}
&-error {
outline: 1px solid red;
}
&-errors-list {
display: none;
}
}
.form-disabled {
position: relative;
&::before {
left: 0;
top: 0;
bottom: 0;
right: 0;
content: " ";
position: absolute;
width: 100%;
height: 100%;
background: white;
opacity: 0.8;
z-index: 11;
display: block;
}
&::after {
content: " ";
width: 40px;
height: 40px;
position: absolute;
display: block;
z-index: 12;
margin: -40px 0 0 -20px;
top: 50%;
left: 50%;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
}
/* global subscribe */
(function(app, $, window, document, undefined) {
'use strict';
// Add class "no-validate" to exclude form from being validated.
var $webForm = $('.webform-client-form').not('.no-validate');
// Test for form on page
if ( $webForm.length ){
// Init Parsley Validation
$webForm.parsley();
// On Parsley Form Success, Add Class of 'form-disabled' to form
window.Parsley.on('form:success', function() {
$webForm.addClass('form-disabled');
});
}
})(window.app = window.app || {}, $, window, document);
@maxxcrawford
Copy link
Author

Example:
validate

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment