Hi,

I'm hoping someone here can help me.

I have made a form, that sends the info to a email.
However when you press Send, it first checks if you have filled out the required fields.

This works just fine in Chrome/FF, but in Internet Explorer it just sends the form, even though all the fields are empty.


Please let me know if you need further information.

Thanks
walkie

index.php

Code:
<?php session_start(); ?>
<!doctype html>
<?php error_reporting (E_ALL ^ E_NOTICE); ?>


<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1; charset=utf-8">
	
	<title>DAT Booking Formular</title>
	<meta name="description" content="">
	<meta name="author" content="">
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="shortcut icon" href="/favicon.ico">
	<link rel="apple-touch-icon" href="/apple-touch-icon.png">
	<link rel="stylesheet" href="css/style.css?v=2">

	<script src="js/libs/modernizr-1.7.min.js"></script>
</head>
<body>
	<header>
		<img src="http://www.w3.org/html/logo/badge/html5-badge-h-solo.png" width="63" height="64" alt="HTML5 Powered with CSS3 / Styling, and Semantics" title="HTML5 Powered with CSS3 / Styling, and Semantics">
		<img class="dat_plane" src="img/dat.png" alt="DAT - Danish Air Transport" title="DAT - Danish Air Transport">
		<br/>
		<?PHP	include("serverinfo.inc.php"); ?>
	</header>
	<div id="container">
        <div id="contact-form" class="clearfix">
            <h1>DAT Booking Formular</h1>
            <h2>Venligst udfyld formularen herunder, s&aring; booker vi dine DAT str&aelig;kninger i Statsteamet.</h2>
            <?php
			//init variables
			$cf = array();
			$sr = false;
			
			if(isset($_SESSION['cf_returndata'])){
				$cf = $_SESSION['cf_returndata'];
			 	$sr = true;
			}
            ?>
            <ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>">
                <li id="info">Der opstod nogle fejl i din udfyldning:</li>
                <?php 
				if(isset($cf['errors']) && count($cf['errors']) > 0) :
					foreach($cf['errors'] as $error) :
				?>
                <li><?php echo $error ?></li>
                <?php
					endforeach;
				endif;
				?>
            </ul>
            <p id="success" class="<?php echo ($sr && $cf['form_ok']) ? 'visible' : ''; ?>">Tak for bookingen. Vi vender tilbage hurtigst muligt!</p>
            <form name="form" method="post" action="process.php">
                <label for="Navn">Fulde navn på rejsende: <span class="required">*</span></label>
                <input type="text" id="Navn" name="Navn" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['Navn'] : '' ?>" placeholder="Henrik Holm Rye Hansen" required autofocus />

                <label for="Medarbejdernummer">Medarbejdernummer: <span class="required">*</span></label>
                <input type="text" id="Medarbejdernummer" name="Medarbejdernummer" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['Medarbejdernummer'] : '' ?>" placeholder="UJXD001" required />

                <label for="Tlfnummer">Telefonnummer: <span class="required">*</span></label>
                <input type="text" id="Tlfnummer" name="Tlfnummer" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['Tlfnummer'] : '' ?>" placeholder="12 34 56 78" required />

                <label for="Sapnummer">Sap-nummer:</label>
                <input type="text" id="Sapnummer" name="Sapnummer" value="" placeholder="1234567890" />

                <label for="Myndighed">Myndighed: <span class="required">*</span></label>
                <input type="text" id="Myndighed" name="Myndighed" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['Myndighed'] : '' ?>" placeholder="" required />

                <label for="Fra">Fra: <span class="required">*</span></label>
                <select id="Fra" name="Fra">
			  <option value="Please choose" selected="selected" disabled>Please Choose</option>
                    <option value="København" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['Fra'] == 'København') ? "selected='selected'" : '' ?>>København</option>
                    <option value="Rønne" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['Fra'] == 'Rønne') ? "selected='selected'" : '' ?>>Rønne</option>
                </select>

                <label for="Til">Til: <span class="required">*</span></label>
                <select id="Til" name="Til">
			  <option value="Please choose" selected="selected" disabled>Please Choose</option>
                    <option value="København" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['Fra'] == 'København') ? "selected='selected'" : '' ?>>København</option>
                    <option value="Rønne" <?php echo ($sr && !$cf['form_ok'] && $cf['posted_form_data']['Fra'] == 'Rønne') ? "selected='selected'" : '' ?>>Rønne</option>
                </select>

                <span id="loading"></span>
                <input type="submit" value="Send!" id="submit-button" />
                <p id="req-field-desc"><span class="required">*</span> Obligatorisk</p>
            </form>
            <?php unset($_SESSION['cf_returndata']); ?>
        </div>
    </div>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>
	<script src="js/plugins.js"></script>
	<script src="js/script.js"></script>
	<!--[if lt IE 7 ]>
	<script src="js/libs/dd_belatedpng.js"></script>
	<script> DD_belatedPNG.fix('img, .png_bg');</script>
	<![endif]-->


</body>
</html>

process.php


Code:
<?php
if( isset($_POST) ){
	//form validation vars
	$formok = true;
	$errors = array();
	
	//sumbission data
	$ipaddress = $_SERVER['REMOTE_ADDR'];
	$date = date('d/m/Y');
	$time = date('H:i:s');
	
	//form data
	$navn = $_POST['Navn'];
	$uid = $_POST['Medarbejdernummer'];	
	$tlf = $_POST['Tlfnummer'];	
	$sap = $_POST['Sapnummer'];
	$myndighed = $_POST['Myndighed'];
	$fra = $_POST['Fra'];
	$til = $_POST['Til']; 
	
	//validate form data
	
	//validate name is not empty
	if(empty($navn)){
		$formok = false;
		$errors[] = "Du skal udfylde navn";
	}

	//validate uid is not empty
	if(empty($uid)){
		$formok = false;
		$errors[] = "Du har ikke udfyldt Medarbejdernummer";
	}

	//validate tlf is not empty
	if(empty($tlf)){
		$formok = false;
		$errors[] = "Du har ikke udfyldt Telefonnummer";
	}

	//validate myndighed is not empty
	if(empty($myndighed)){
		$formok = false;
		$errors[] = "Du mangler at udfylde Myndighed";
	}

	//validate Fra is not empty
	if($fra == "Please choose"){
		$formok = false;
		$errors[] = "Du skal vælge hvorfra flyet skal afgå";
	}

	//validate Til is not empty
	if($til == "Please choose"){
		$formok = false;
		$errors[] = "Du skal vælge hvortil der skal flyves";
	}

	
	//send email if all is ok
	if($formok){

		//==============
		//CONFIGURATION
		//==============

		//Email address:
		//$to = "staten.dk@contactcwt.com";
		$to = "mlarsen@carlsonwagonlit.dk";

		//The subject
		$mailsub  = "DAT booking"; //The default subject. Will appear by default in all messages. Change this if you want.
	
		//Headers
		$headers = "From: Forsvaret DAT Booking Formular \r\n";
		$headers .= "MIME-Version: 1.0\r\n";
		$headers .= "Content-Type: text/html; charset=UTF-8\r\n";
	
		$msg  = "<b>Navn:</b><br> " . $navn . "<br><br>";
		$msg .= "<b>Medarbejdernummer:</b><br> " . $uid . "<br><br>";
		$msg .= "<b>Telefonnummer:</b><br> " . $tlf . "<br><br>";
		$msg .= "<b>Sapnummer:</b><br> " . $sap . "<br><br>";
		$msg .= "<b>Myndighed:</b><br> " . $myndighed . "<br><br>";
		$msg .= "<b>Fra:</b> " . $fra . "<br>";
		$msg .= "<b>Til:</b> " . $til . "<br>";
		
		mail($to, $mailsub, $msg, $headers);

	}
	
	//what we need to return back to our form
	$returndata = array(
		'posted_form_data' => array(
			'navn' => $navn,
			'uid' => $uid,
			'tlf' => $tlf,
			'sap' => $sap,
			'myndighed' => $myndighed,
			'fra' => $fra,
			'til' => $til
		),
		'form_ok' => $formok,
		'errors' => $errors
	);
		
	
	//if this is not an ajax request
	if(empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest'){
		//set session variables
		session_start();
		$_SESSION['cf_returndata'] = $returndata;
		
		//redirect back to form
		header('location: ' . $_SERVER['HTTP_REFERER']);
	}
}


script.js

Code:
$(function(){

	//set global variables and cache DOM elements for reuse later
	var form = $('#contact-form').find('form'),
		formElements = form.find('input[type!="submit"],textarea'),
		formSubmitButton = form.find('[type="submit"]'),
		errorNotice = $('#errors'),
		successNotice = $('#success'),
		loading = $('#loading'),
		errorMessages = {
			required: ' er et obligatorisk felt',
			email: 'Invalid email address for the field: ',
			minlength: ' must be greater than '
		}
	
	//feature detection + polyfills
	formElements.each(function(){

		//if HTML5 input placeholder attribute is not supported
		if(!Modernizr.input.placeholder){
			var placeholderText = this.getAttribute('placeholder');
			if(placeholderText){
				$(this)
					.addClass('placeholder-text')
					.val(placeholderText)
					.bind('focus',function(){
						if(this.value == placeholderText){
							$(this)
								.val('')
								.removeClass('placeholder-text');
						}
					})
					.bind('blur',function(){
						if(this.value == ''){
							$(this)
								.val(placeholderText)
								.addClass('placeholder-text');
						}
					});
			}
		}
		
		//if HTML5 input autofocus attribute is not supported
		if(!Modernizr.input.autofocus){
			if(this.getAttribute('autofocus')) this.focus();
		}
		
	});
	
	//to ensure compatibility with HTML5 forms, we have to validate the form on submit button click event rather than form submit event. 
	//An invalid html5 form element will not trigger a form submit.
	formSubmitButton.bind('click',function(){
		var formok = true,
			errors = [];
			
		formElements.each(function(){
			var name = this.name,
				nameUC = name.ucfirst(),
				value = this.value,
				placeholderText = this.getAttribute('placeholder'),
				type = this.getAttribute('type'), //get type old school way
				isRequired = this.getAttribute('required'),
				minLength = this.getAttribute('data-minlength');
			
			//if HTML5 formfields are supported			
			if( (this.validity) && !this.validity.valid ){
				formok = false;
				
				console.log(this.validity);
				
				//if there is a value missing
				if(this.validity.valueMissing){
					errors.push(nameUC + errorMessages.required);	
				}
				//if this is an email input and it is not valid
				else if(this.validity.typeMismatch && type == 'email'){
					errors.push(errorMessages.email + nameUC);
				}
				
				this.focus(); //safari does not focus element an invalid element
				return false;
			}
			
			//if this is a required element
			if(isRequired){	
				//if HTML5 input required attribute is not supported
				if(!Modernizr.input.required){
					if(value == placeholderText){
						this.focus();
						formok = false;
						errors.push(nameUC + errorMessages.required);
						return false;
					}
				}
			}

			//if HTML5 input email input is not supported
			if(type == 'email'){ 	
				if(!Modernizr.inputtypes.email){ 
					var emailRegEx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
				 	if( !emailRegEx.test(value) ){	
						this.focus();
						formok = false;
						errors.push(errorMessages.email + nameUC);
						return false;
					}
				}
			}
			
			//check minimum lengths
			if(minLength){
				if( value.length < parseInt(minLength) ){
					this.focus();
					formok = false;
					errors.push(nameUC + errorMessages.minlength + minLength + ' charcters');
					return false;
				}
			}
		});
		
		//if form is not valid
		if(!formok){
			
			//animate required field notice
			$('#req-field-desc')
				.stop()
				.animate({
					marginLeft: '+=' + 5
				},150,function(){
					$(this).animate({
						marginLeft: '-=' + 5
					},150);
				});
			
			//show error message 
			showNotice('error',errors);
			
		}
		//if form is valid
		else {
			loading.show();
			$.ajax({
				url: form.attr('action'),
				type: form.attr('method'),
				data: form.serialize(),
				success: function(){
					showNotice('success');
					form.get(0).reset();
					loading.hide();
				}
			});
		}
		
		return false; //this stops submission off the form and also stops browsers showing default error messages
		
	});

	//other misc functions
	function showNotice(type,data)
	{
		if(type == 'error'){
			successNotice.hide();
			errorNotice.find("li[id!='info']").remove();
			for(x in data){
				errorNotice.append('<li>'+data[x]+'</li>');	
			}
			errorNotice.show();
		}
		else {
			errorNotice.hide();
			successNotice.show();	
		}
	}
	
	String.prototype.ucfirst = function() {
		return this.charAt(0).toUpperCase() + this.slice(1);
	}
	
});