Last active
December 28, 2015 22:33
-
-
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Example:
