jquery.org/join: Client-side validation and forwarding to thank you page on success.

Author: scottgonzalez

themes/jquery.org/style.css

@@ -199,6 +199,10 @@ ul.flex-direction-nav {
 	font-weight: bold;
 }
 
+.errors li {
+	color: #a00;
+}
+
 a.icon-search {
 	width: 100px;
 	height: 100px;
@@ -218,15 +222,15 @@ a.icon-search::before {
 	color: #333333;
 }
 
-.member-level ul {
+.member-level ul.gifts {
 	float: left;
 	list-style: none;
 	position: relative;
 	z-index: 2;
 }
 
-#content .member-level ul li,
-#content .member-level ul li strong {
+#content .member-level ul.gifts li,
+#content .member-level ul.gifts li strong {
 	padding-left: 0;
 	padding-right: 15px;
 	background: none;

themes/jquery/js/main.js

@@ -94,6 +94,10 @@ $(function() {
 					action: StripeForm.action,
 					nonce: StripeForm.nonce
 				}, data )
+			}).done(function() {
+				window.location = "/join/thanks/";
+			}).fail(function() {
+				// TODO
 			});
 		}
 
@@ -105,24 +109,30 @@ $(function() {
 				email = $.trim( form.find( "[name=email]" ).val() ),
 				address = $.trim( form.find( "[name=address]" ).val() ),
 				gifts = form.find( "select" ),
-				errors = [];
+				errors = form.find( ".errors" ).empty().hide(),
+				valid = true;
+
+			function showError( msg ) {
+				$( "<li>" ).text( msg ).appendTo( errors );
+				valid = false;
+			}
 
 			// Verify all fields
 			if ( name.length < 3 ) {
-				errors.push( "Please provide your full name." );
+				showError( "Please provide your full name." );
 			}
 			if ( email.length < 7 ) {
-				errors.push( "Please provide a valid email address" );
+				showError( "Please provide a valid email address" );
 			}
 			if ( address.length < 10 ) {
-				errors.push( "Please provide your full address." );
+				showError( "Please provide your full address." );
 			}
 			if ( gifts.filter(function() { return !$( this ).val(); }).length ) {
-				errors.push( "Please choose a size for each gift." );
+				showError( "Please choose a size for each gift." );
 			}
 
-			// TODO: error handling
-			if ( errors.length ) {
+			if ( !valid ) {
+				errors.slideDown();
 				return;
 			}