Op mijn site http://www.vanbaasbank.nl zit ik met de volgende uitdaging:
Ik krijg <input required> niet goed werkend.
In Google Chrome werkt alles met onderstaande script goed maar in andere browsers werkt het required niet volledig en/of de melding vanuit de browser dat het veld een verplicht veld is, komt niet.
Wie heeft een suggestie?
De HTML5-code:
<?php
/**
* @author George van Baasbank
* @package vanbaasbank
* @subpackage reactie
* @copyright Ermelo Software
* @since 16-7-2012
* bestandsnaam reactie.inc
* beschrijving Contactformulier
* aangeroepen door -
* roept aan -
* opmerking Geoptimaliserd voor HTML5 en CSS3
* taalmodule -
* functies functiebieb
* e-mail [email protected]
* project Nieuwe website Van Baasbank
*
*/
session_start();
error_reporting(0);
if(isset($_SERVER['REMOTE_ADDR'])) {
$cIpadres = $_SERVER['REMOTE_ADDR'];
} else {
$cIpadres = "Onbekend";
}
if(isset($_SERVER['HTTP_USER_AGENT'])) {
$cBrowser = $_SERVER['HTTP_USER_AGENT'];
} else {
$cBrowser = "Onbekend";
}
// Declaratie variabelen
$cPaginanaam = "reactie";
$nAantalFouten = 0;
// Laden functiebibliotheek
include "functies/functiebieb.inc";
// Geïndexeerde array met maanden
$aMaanden = array (
1 => 'januari',
'februari',
'maart',
'april',
'mei',
'juni',
'juli',
'augustus',
'september',
'oktober',
'november',
'december'
);
if(isset($_POST['submit'])) {
$cNaam = $_POST['naam'];
$cEmailbezoeker = $_POST['emailadres'];
$cOnderwerp = $_POST['onderwerp'];
$cBericht = $_POST['bericht'];
$cNaam = htmlentities(trim(strip_tags($cNaam)));
$cEmailbezoeker = htmlentities(trim(strip_tags($cEmailbezoeker)));
$cOnderwerp = htmlentities(trim(strip_tags($cOnderwerp)));
$cBericht = htmlentities(trim(strip_tags($cBericht)));
// Converteer emailadres naar ondercast
$cEmailbezoeker = TekstinOndercast($cEmailbezoeker);
if($cOnderwerp != "" AND $cBericht != "" AND $cEmailbezoeker != "" AND $cNaam != "" ) { // Alle velden correct ingevuld
// Constanten voor mysql_connect() insluiten:
require_once('mysql_connect.inc.php');
// Databaseverbinding openen:
$verbinding = mysql_connect(MYSQL_SERVER, MYSQL_GEBRUIKERSNAAM, MYSQL_WACHTWOORD) or die("Verbinding mislukt: " . mysql_error());
// Database selecteren:
mysql_select_db("xxxxxxxxxxxx") or die("Kon de database niet openen: " . mysql_error());
// Query samenstellen
$sql = "INSERT INTO aanvullingen (ipadres, email, naam, bericht, persoon, datum)";
$sql .= "VALUES ('$cIpadres','$cEmailbezoeker','$cNaam','$cBericht','$cOnderwerp',NOW())";
$cResultMail = mysql_query($sql);
// Sluiten database
mysql_close($verbinding);
header("Location: bevestiging.php");
exit();
}
}
// Databases scannen voor opmaak pagina
include "opmaak.inc";
include "jarig.inc";
// Database sluiten
mysql_close($verbinding);
?>
<!doctype html>
<html lang = "nl">
<head>
<!-- Begin metatags en titel -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="3 days" />
<meta name="keywords" content="<?php echo $cMetaKeywords ; ?>" />
<meta name="author" content="<?php echo $cMetaAuteur ; ?>" />
<meta name="web_author" content="<?php echo $cMetaWebAuteur ; ?>" />
<meta name="description" content="<?php echo $cMetaDescription ; ?>" />
<meta name="copyright" content="Ermelo Software 2012" />
<title><?php echo $cMetaTitel ; ?></title>
<!-- Einde metatags en titel -->
<!-- Begin stylesheets en scripts -->
<!--[if lt IE 9]><script src="scripts/html5shiv.js"></script><![endif]-->
<meta charset="utf-8" />
<title>VanBaasbank.nl | Contactformulier</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/formulier.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript" src="js/simpletabs.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript">
$(function() {
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
});
</script>
<!-- Einde stylesheets en scripts -->
</head>
<body>
<div id="wrapper"><!-- #wrapper -->
<header><!-- header -->
<h1><a href="#"><?php echo $cWebsitenaam ; ?></a></h1>
<h2><?php echo $cHeader1 ; ?>'</h2>
<img src="<?php echo $cHeaderafbeelding ; ?>" width="940" height="200" alt="" /><!-- header image -->
</header><!-- end of header -->
<!-- Invoegen hoofdmenu -->
<?php include "menu.inc" ; ?>
<!-- Einde invoegen hoofdmenu -->
<section id="main"><!-- #main content and sidebar area -->
<section id="content"><!-- #content -->
<!-- Contactformulier -->
<article class="featured">
<div class="autokader">
<h3>Contactformulier</h3>
<form action="reactie.php" method="POST">
<label for="naam">Uw naam <sup>*</sup></label>
<input name="naam" placeholder="Uw volledige naam" required />
<label for="email">Uw e-mailadres <sup>*</sup></label>
<input type="email" name="emailadres" placeholder="[email protected]" required />
<label for="onderwerp">Onderwerp <sup>*</sup></label>
<input type="text" name="onderwerp" placeholder="Het onderwerp van uw reactie" required />
<label for="bericht">Uw bericht <sup>*</sup></label>
<textarea rows="6" id="bericht" name="bericht" placeholder="Uw bericht" required="required" ></textarea>
<div class="regelhoogte50"></div>
<label for="submit" class="centerit" title="KLik hier om uw bericht te verzenden">
<input type="submit" name="submit" value="Verzenden bericht" /></label>
</form>
</div>
</article>
<!-- Einde contactformulier -->
</section><!-- end of #content -->
<aside id="sidebar"><!-- sidebar -->
<div class="tabwidget">
<ul class="tabs">
<li><a href="#tab1">Nieuws</a></li>
<li><a href="#tab2">Genealogie</a></li>
<li><a href="#tab3">Over mij</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h3>Recente Artikelen</h3>
<ul>
<?php
while($row = mysql_fetch_array($cResultTicker)) {
?>
<li><a href="artikel.php?id=<?php echo $row['id'] ; ?>">* <?php echo $row['kop'] ; ?><br /></a></li>
<?php } ?>
</ul>
</div>
<!-- Invoegen hyperlinken Genealogie -->
<?php include "genealogielinken.inc"; ?>
<!-- Einde invoegen genealogielinken -->
<div id="tab3" class="tab_content">
<h3>Wie ben ik</h3>
<img src="<?php echo $cMijnFoto ; ?>" alt="" /><p><?php echo $cMijnInfo ; ?></p>
</div>
</div>
</div>
<div class="standard">
<!-- De jarige van de dag -->
<?php
$cDag = date('d');
$cMaand = date('n');
?>
<h3>Geboren <?php echo $cDag . " ". $aMaanden[$cMaand] ; ?></h3>
<?php
$cTest = "";
while($row = mysql_fetch_array($cResultJarige)) {
$cX = "(". substr($row['g_sortdatum'],2,4) . ") " . $row['eerste'] ." " . $row['tussenvoeg'] . " " . $row['achternaam'];
$cIdnummer = $row['id'];
$cHyperlink = "kleinekaart.php?id=".$cIdnummer;
if($cIdnummer != $cTest){
$cTest = $cIdnummer;
?>
<p class="kleineletter"><a href="<?php echo $cHyperlink ; ?>"><?php echo $cX ; ?></p></a>
<?php
} }
?>
<!-- Einde jarige van de dag -->
<!-- Advertentie met hyperlink -->
<h3></h3>
<a href="<?php echo $cAdvHyperlink ; ?>" target="_blank"><img src="<?php echo $cSponsor ; ?>" alt="Sponsor" /></a><br /><br />
<!-- Einde advertentie -->
<!-- Sociale media -->
<h3>Connect With Us</h3>
<ul>
<li><a href="http://www.twitter.com/opzondag" target="_blank"><img src="images/twitter-banner.jpg" alt="twitter" /></a></li>
<li><a href="#">Facebook</a></li>
</ul>
<!-- Einde sociale media -->
</div>
</aside><!-- end of sidebar -->
</section><!-- end of #main content and sidebar-->
<!-- Invoegen kruimelpad footer -->
<?php include "footer.inc" ; ?>
<!-- Einde invoegen kruimelpad -->
</div><!-- #wrapper -->
<!-- Free template created by http://freehtml5templates.com -->
</body>
</html>
De bijbehorende CSS3-code:
/*
Deze css is bestemd voor het valideren van het invuldocument
*/
.clear { clear: both; }
form {
width: 410px;
padding: 20px 30px;
margin: 0 auto;
color: #fff;
overflow: hidden;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: 0px 0px 10px #690011;
-webkit-box-shadow: 0px 0px 10px #690011;
-ms-box-shadow: 0px 0px 10px #690011;
box-shadow: 0px 0px 10px #690011;
}
label {
position: relative;
clear: both;
display: block;
text-shadow: 0px -1px 0px #000;
text-shadow: 0 -1px rgba(0,0,0,0.5);
font-family: Arial,sans-serif;
}
sup { color: red; }
input {
font-size: 14px;
margin-bottom: 25px;
border: 2px solid #690011;
padding: 8px;
background: #fff;
color: #696969;
width: 385px;
-webkit-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
-moz-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
-ms-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
}
input:focus {
border: 2px solid #33c400;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
input[type=date],
input[type=number],
input[type=submit] {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
width: auto;
}
input[type=checkbox] {
display: inline;
font-size: 14px;
border: none;
width: auto;
padding: 10px;
margin: 0px;
margin-bottom: -7px;
}
textarea {
width: 400px;
height: 150px;
color: #696969;
font-family: Arial;
font-size: 14px;
}
input:invalid { background: #efdee0 url(images/invalid.png) no-repeat center right; }
input:valid { background: #f3f8ed url(images/valid.png) no-repeat center right; }
textarea:invalid { background: #efdee0 url(images/invalid.png) no-repeat top right;}
textarea:valid { background: #f3f8ed url(images/valid.png) no-repeat top right; }
input[type=submit] {
background: #F2D99C;
display: inline-block;
padding: 5px 10px 6px;
color: #690011;
text-decoration: none;
font-weight: bold;
border: none;
position: relative;
cursor: pointer;
font-size: 16px;
margin-top: 30px;
font-family: Helvetica, Arial;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
-ms-box-shadow: 0 1px 3px #999;
box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #fff;
-webkit-transition: all 0.2s linear
}
input[type=submit]:hover {
background-color: #E5B96F;
-webkit-transform: scale(1.1);
-moz-box-shadow: 0 1px 6px #000;
-webkit-box-shadow: 0 1px 6px #000;
box-shadow: 0 1px 6px #000;
}
.legal {
clear: both;
font-size: 10px;
margin: 15px 0;
color: #fff;
text-shadow: 0px -1px 0px #000;
text-shadow: 0 -1px rgba(0,0,0,0.5);
}
.centerit {
text-align: center;
}
Bezoek de site eens en probeer het contactformulier te verzenden zonder de velden in te vullen.
George van Baasbank
