xtend_supportform/js/main.js

(function($) {
	"use strict";

	function validatePhoneForE164(phoneNumber) {
		const regEx = /^\+[1-9]\d{10,14}$/;
	
		return regEx.test(phoneNumber);
	};

	var availableTags = [
		"Probleme beim VPN",
		"Passwort vergessen",
		"Kein WLAN",
		"Kein Internet",
		"Outlook öffnet sich nicht"
	];
	$( "#subject" ).autocomplete({
		source: availableTags,
		autoFocus: false,
		minLength:2,   
		delay:500
	});

	// Form
	var contactForm = function() {
		if ($('#contactForm').length > 0 ) {
			jQuery.validator.addMethod('intlphone', function(value) { return (value.match(/^((\+)?[1-9]{1,2})?([-\s\.])?((\(\d{1,4}\))|\d{1,4})(([-\s\.])?[0-9]{1,12}){1,2}(\s*(ext|x)\s*\.?:?\s*([0-9]+))?$/)); }, 'Bitte gib eine gültige Rufnummer ein!');
			$( "#contactForm" ).validate( {
				rules: {
					name: "required",
					subject: "required",
					location: "required",
					email: {
						required: false,
						email: true
					},
					phone: {
						required: false,
						intlphone: true
					},
					computer: {
						required: true,
						minlength: 4
					},
					message: {
						required: true,
						minlength: 5
					}
				},
				messages: {
					name: "Wie lautet dein Vor- und Nachname?",
					subject: "Bitte eine ganz kurze Beschreibung eingeben!",
					email: "Bitte gib uns eine Emailadresse unter der wir dich erreichen können.",
					phone: "Bitte gib uns eine Telefonnummer unter der wir dich erreichen können.",
					computer: "Bitte gib den Computer Namen ein. Dieser befindet sich auf dem Aufkleber auf dem Gerät.",
					message: "Beschreib bitte dein Problem so ausführlich aber auch so kurz wie möglich.",
					location: "Wo bist du aktuell?"
				},
				errorLabelContainer: ".errorTxt",
				errorElement : 'div',
				/* submit via ajax */
				
				submitHandler: function(form) {		
					var $submit = $('.submitting'),
						waitText = 'Übertragung läuft...';

					$.ajax({   	
				      type: "POST",
				      url: "php/sendEmail.php",
				      data: $(form).serialize(),

				      beforeSend: function() { 
				      	$submit.css('display', 'block').text(waitText);
				      },
				      success: function(msg) {
		               if (msg == 'OK') {
		               	$('#form-message-warning').hide();
				            setTimeout(function(){
		               		$('#contactForm').fadeIn();
		               	}, 1000);
				            setTimeout(function(){
				               $('#form-message-success').fadeIn();   
		               	}, 1400);

		               	setTimeout(function(){
				               $('#form-message-success').fadeOut();   
		               	}, 8000);

		               	setTimeout(function(){
				               $submit.css('display', 'none').text(waitText);  
		               	}, 1400);

		               	setTimeout(function(){
		               		$( '#contactForm' ).each(function(){
								this.reset();
							});
		               	}, 1400);
			               
			            } else {
							$('#form-message-warning').html(msg);
							$('#form-message-warning').fadeIn();
							$submit.css('display', 'none');
			            }
				      },
				      error: function() {
				    	$('#form-message-warning').html("Es ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.");
				        $('#form-message-warning').fadeIn();
				        $submit.css('display', 'none');
				      }
			      });    		
		  		} // end submitHandler

			});
		}
	};
	contactForm();

})(jQuery);