Formular check virker ikke i IE
Hej,Jeg håber at nogen her kan hjælpe mig.
Jeg har lavet en formular, som sender informationen videre til en mail. Inden den afsender mailen, tjekker den om de obligatoriske felter er udfyldt. Det virker fint i Chrome/FF, men selvfølgelig ikke i IE8, som vi bruger på min arbejdsplads og jeg kan simpelthen ikke finde ud af hvorfor.
Herunder er de 3 involverede filer. Sig til hvis I mangler mere information :)
PFT
index.php
<?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å booker vi dine DAT stræ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
<?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
$(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);
}
});
