some client side cred funcs for CMS plugin

ClientSideCMSCredFuncs.js

		// check for error / success messages
		check_dom_msgs();

		// register event listener module
		var register = ( function() {

			// cache DOM
			var $form 				= $( '#form_reg' );
			var $form_inputs		= $form.find( 'input' ).not( '#reg_btn, #reg_hidden' );
			var min_length			= 5, max_length = 20, max_pw_length = 100;
			var error 				= false;

			// bind events
			$form.on( 'submit', submit_regform );
			// $form_inputs.on( 'focusout', submit_form );


			// event functions
			function submit_regform( event )
			{
				error = false; // module scoped error value

				if ( event.type == 'focusout' )
				{
					verify_regform_input();
				}
				else if ( event.type == 'submit' )
				{
					verify_regform_inputs();
				}
			}


			// module functions
			function verify_regform_inputs()
			{
				$form_inputs.each( verify_regform_input );
			}


			// loop functions
			function verify_regform_input()
			{
				var $input = ( event.type === 'submit' ? $( this ) : $( event.target ) ); // if submit fired then this ( form ) else target ( input element )				
				var	input_name	= $input.attr( 'data-form_item' ); // input name

				remove_existing_alert( $input );

				// form pre submission criteria		
				if ( $input.val() == "" ) // if input is blank...
				{
					display_form_input_alert( $input, "warning", " cannot be blank!" );
					error = true;
				}
				else if ( input_name === "username" && $input.val().length < 5 ) // check username min length
				{
					display_form_input_alert( $input, "warning", " is too short!" );
					error = true;
				}
				else if ( input_name === "username" && $input.val().length > 20 ) // check username max length
				{
					display_form_input_alert( $input, "warning", " is too long!" );
					error = true;
				}
				else if ( input_name === "username" && ( $input.val().match( /[^a-z0-9]+/ig ) !== null || $input.val().match( /^(?=.*[\s]).*$/g ) !== null ) ) // check only alphanumeric and must not contain spaces
				{
					display_form_input_alert( $input, "warning", " can only have letters and numbers!" );
					error = true;
				}
			 	else if ( input_name === "username" && $input.val().match( /\d/gi ) !== null && $input.val().replace( /\d/gi, '' ).length < min_length ) // check contains at least min_length letters ANYWHERE
			 	{			 		
					display_form_input_alert( $input, "warning"
									  , " must have at least " + min_length + ' letter'
									  + ( min_length > 1 ? 's' : '' ) + '!</label>' );
					error = true;
			 	}
			 	else if ( input_name === "email" && $input.val().match( /^[\w-\._\+%]+@(?:[\w-]+\.)+[\w]{2,6}$/i ) === null )
			 	{
					display_form_input_alert( $input, "warning", " address is not valid!" );
					error = true;
			 	}
			 	else if ( input_name === "password" && $input.val().length < min_length )
			 	{
					display_form_input_alert( $input, "warning"
								      , " must have at least " + min_length + ' letter'
									  + ( min_length > 1 ? 's' : '' ) + '!</label>' );
					error = true;
			 	}
			 	else if ( input_name === "password" && $input.val().length > max_pw_length )
			 	{
					display_form_input_alert( $input, "warning", 'can only have ' + max_pw_length + ' characters!' );
					error = true;
			 	}
			 	else if ( input_name=== "password" && $input.val().match( /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[:-\?!-\.]).*$/g ) === null )
			 	{
					display_form_input_alert( $input, "warning"
									  , ' must have at least must contain at least 1 lowercase, uppercase, number and'
									  + ' <a href="#" data-toggle="tooltip" '
									  + ' title="Example: &#33; &#34; &#35; &#36; &#37; &#39; &#41; &#40; &#58; &#59;'
									  + ' &#60; &#61; &#62;">special character!</a></label>' );

					$( '[data-toggle="tooltip"]' ).tooltip(
					{
						animation: true,
						delay: { show: 100, hide: 1000 }
					}); // show/hide character tooltip

					error = true;
			 	}
			 	else if ( error === false ) // if an input is good display success alert
			 	{
					display_form_input_alert( $input, "success", " good!");
					$input.attr( 'name', $input.attr( 'data-form_item' ) ); // if successful add name attribute to input
			 	}


				if ( error === true )
				{
					event.preventDefault(); // stops normal submit from firing
				}
				else if ( error === false ) // if no register errors submit form
				{
					// alert( 'submit' );
					// event.preventDefault(); // stops normal submit from firing
				}			 	
			}

		})();


		// login event listener module
		var login = ( function() {

			// cache DOM
			var $form 				= $( '#form_login' );
			var $form_inputs		= $form.find( 'input' ).not( '#login_btn, #login_hidden' );
			var min_length			= 5, max_length = 20, max_pw_length = 100;
			var error 				= false;

			// bind events
			$form.on( 'submit', submit_login );
			// $form_inputs.on( 'focusout', submit_form );

			function submit_login( event )
			{

				// event.preventDefault();

				error = false; // module scoped error value

				if ( event.type == 'focusout' )
				{
					verify_loginform_input();
				}
				else if ( event.type == 'submit' )
				{
					verify_loginform_inputs();
				}
			}

			// module functions
			function verify_loginform_inputs()
			{
				$form_inputs.each( verify_loginform_input );
			}


			// loop functions
			function verify_loginform_input()
			{
				var $input = ( event.type === 'submit' ? $( this ) : $( event.target ) ); // if submit fired then this ( form ) else target ( input element )				
				var	input_name	= $input.attr( 'data-form_item' ); // input name

				remove_existing_alert( $input );

				// form pre submission criteria
				if ( $input.val() == "" ) // if input is blank...
				{
					display_form_input_alert( $input, "warning", " cannot be blank!" );					
					error = true;
				}
			 	else if ( error === false ) // if an input is good display success alert
			 	{
					display_form_input_alert( $input, "warning", " cannot be blank!" );
					$input.attr( 'name', $input.attr( 'data-form_item' ) ); // if successful add name attribute to input					
			 	}

				if ( error === true )
				{
					event.preventDefault(); // stops normal submit from firing
				}
				else if ( error === false ) // if no register errors submit form
				{
					// alert( 'submit' );
					// event.preventDefault(); // stops normal submit from firing
				}			 	

			}

		})();


		// remove alert label if it exists
		function remove_existing_alert( $input )
		{
			var $alert_label = $input.prev();

			if ( typeof $alert_label !== 'undefined' ) // remove the alerts if they already exist
			{
				$alert_label.remove();
			}
		}

		// check for error / success messages
		function check_dom_msgs()
		{
			if ( $( '.error, .success' ).length > 0 )
			{
				var $modal_title	= $( '.modal-title' ),
					$modal_body		= $( '.modal-body' ),
					$modal_save_btn	= $( '#modal_save_btn' );

				var $error_div		= $( '.error' ),
					$error_msg		= $error_div.text(),
					$error_type		= $error_msg.substr( 0, 5 );

				var $success_div	= $( '.success' ),
					$success_msg	= $success_div.text();			

					$modal_save_btn.remove(); // remove modal save button

				// assign error, display modal
				if ( $error_div.length > 0 )
				{
					display_user_modal( $error_div, $modal_title, $modal_body,
						( $error_type == "Sorry" || $error_type == "Login" ? $( '#form_login' ) : $( '#form_reg' ) ), 'Whoops!', // if error is sorry or login then scroll to login box
						$error_msg );
				}
				else if ( $success_div.length > 0 )
				{
					display_user_modal( $success_div, $modal_title, $modal_body, $( '#form_login' ), 'Great!', $success_msg );
				}
			}
		}

		// input alert functions
		function display_form_input_alert( $input, type, msg, min_length )
		{
			var $label_group 	= $input.parent(), // label group
				$input_group 	= $label_group.parent(), // input group
				input_name		= $input.attr( 'data-form_item' ); // form id name

			$input_group.attr( 'class', 'input-group has-' + type );
			$label_group.attr( 'class', 'form-group is-empty has-' + type );
			$label_group.prepend( '<label class="control-label">' + input_name + msg + '</label>' );

			// bind remove alert event functions
			remove_form_input_alert( $input, $label_group, $input_group ); 
		}


		// input event functions
		function remove_form_input_alert( $input, $label_group, $input_group )
		{
			var $label = $input.prev() // label element;

			$input.on( 'click', function()
			{
				$( this ).off(); // Turn off event

				$label.animate( { opacity: 0.0 }, 1000, function() // fade alert and remove
				{
					$label.remove();
					$input_group.attr( 'class', 'input-group' );
					$label_group.attr( 'class', 'form-group is-empty' );
					$input.trigger( 'focus' );
				});
			});
		}	


		function display_user_modal( div_obj, modal_title_obj, model_body_obj, scroll_to_obj, label_text, model_text, scroll_to_ofs = 100 )
		{
			// div_obj.remove(); // remove dom msg element
			modal_title_obj.text( label_text ); // change modal label

			model_body_obj.text( model_text ); // modal text

			$( '[data-toggle="modal"]' ).trigger( 'click' ); // trigger modal popup

		    $( 'html, body' ).animate(
		    {
		    	scrollTop: ( scroll_to_obj.offset().top - scroll_to_ofs )
		    },	2000 );
		}


		function remove_alert( element )
		{
			$( element ).on( 'click', function() // remove alert state when clicking on input
			{
				var $input_obj	 = $( this ); // input object
				var $form_id	 = $input_obj.attr( 'data-form_item' ); // form id name
				var $form_group	 = $input_obj.parent(); // form group div
				var $input_group = $form_group.parent(); // input group div
				var $input_label = $input_obj.prev(); // alert label for input

				$( this ).off(); // TURN THIS OFF OR IT COULD POTENTIALLY REMOVE OTHER ELEMENTS

				$input_obj.removeAttr( 'name' );

				$input_label.animate( { opacity: 0.0 }, 300, function() // fade alert and remove
				{
					$input_label.remove();
					$input_group.attr( 'class', 'input-group' );
					$form_group.attr( 'class', 'form-group is-empty' );
				});
			}); 			
		}			
	});