Validation formulaire html5 compatible tout navigateur web

Bonjour,

- j'ai un formulaire en HTML 5 avec les nouveaux champs :

email, pour le champ email ;

tel, pour le champ téléphone ;

number, pour le numéro de carte et le code de sécurité ;

required, pour les champs à saisie obligatoire ;

placeholder, pour donner des indications à l'intérieur de certains champs ;

autofocus, pour permettre une focalisation sur le premier champ de saisie lorsque la page est chargée.


- je souhaite surtout avoir les messages d'erreurs lors de la validation du formulaire.



J'ai trouvé un tutoriel pour mettre en place un formulaire en HTML 5 compatible tout navigateur (ancienne et nouvelle génération) :

http://www.useragentman.com/blog/2010/07/27/creating-cross-browser-html5-forms-now-using-modernizr-webforms2-and-html5widgets-2/


mais je ne saisie pas tout, quand je teste sur internet explorer 6 , 7 et 8, cela ne fonctionne pas


voila un bout de code de mon formulaire

<fieldset id="projet" >
			
			<legend>INFORMATIONS </legend>

		<div class="choise_container">
<label class="description" for="livraison">Livraison du bâtiment</label>
	<ul class="choise_description">

		<li> <input type="radio" id="cle_en_main" name="livraison"  value="Clé en main" required/>
		<label class="choice" for="cle_en_main">Clé en main</label>
		</li>

                <li> <input type="radio" id="hors_eau_hors_air" name="livraison"  value="Hors d'eau / Hors d'air" />
		<label class="choice" for="hors_eau_hors_air">Hors d'eau / Hors d'air</label>
		</li>
       </ul>



<label class="description" for="construction">Type de Construction </label>
	<select  id="construction" name="construction" required> 
		
               <option value="" >Sélectionnez une option</option>
               <option value="Construction de maison à neuf" >Construction de maison à neuf</option>
						
        </select>


<label class="description" for="materiaux">Type de matériaux à utiliser</label>
		<ul class="choise_description">

			<li> <input type="checkbox"id="materiaux_parpaing" name="materiaux[]"   value="Traditionnel (parpaing)" />
			<label class="choice" for="materiaux_parpaing">Traditionnel (parpaing)</label>
			</li>

			<li> <input type="checkbox" id="materiaux_brique" name="materiaux[]"  value="Brique" />
					<label class="choice" for="materiaux_brique">Brique</label>
			</li>
		</ul>	


<label class="description" for="vos_coordonnees">Vos Coordonnées</label><br>
		
				
	<ul class="choise_civilite">
				
				
		<li class="civilite_select">
			<label class="civilite" for="civilite">Civilité <span>*</span> :  </label>
			
				<select  id="civilite" name="civilite" required> 
					<option value="">  </option>
					<option value="Monsieur" >Monsieur</option>
					<option value="Madame" >Madame</option>
					<option value="Mademoielle" >Mademoielle</option>
				</select>
			</li>
			
		
			
		 <li>
		<label class="coordonnees" for="prenom">Prénom <span>*</span></label>
			<input type="text" id="prenom" name="prenom" value="<?php if(isset($_POST['prenom'])) echo $_POST['prenom'];?>" required/> 		
		</li> 
		
	
		<li> 
		<label class="coordonnees" for="nom">Nom <span>*</span></label>
			<input type="text" id="nom" name="nom" value="<?php if(isset($_POST['nom'])) echo $_POST['nom'];?>"  required/> 
		</li> 
		 
		
	
		<li class="civilite_entreprise"> 		
		<label class="entreprise" for="entreprise ">Entreprise</label>
		<input type="text" id="entreprise" name="entreprise"  value="<?php if(isset($_POST['entreprise'])) echo $_POST['entreprise'];?>"/> 
		</li>
	

		<li class="civilite_adresse"> 		
		<label class="adresse" for="adresse ">Adresse <span>*</span></label>
		<input type="text" id="adresse" name="adresse"  value="<?php if(isset($_POST['adresse'])) echo $_POST['adresse'];?>" required/> 
		</li>
			
		
		<li class="civilite_code_postal"> 
		<label class="coordonnees" for="code_postal ">Code postal <span>*</span></label>
		<input type="number" id="code_postal" name="code_postal"  value="<?php if(isset($_POST['code_postal'])) echo $_POST['code_postal'];?>" required/> 
		</li> 	
		<li> 
		<label class="coordonnees" for="ville ">Ville <span>*</span></label>
		<input type="text" id="ville" name="ville"  value="<?php if(isset($_POST['ville'])) echo $_POST['ville'];?>" required/> 
		</li> 


		<li class="civilite_pays"><label class="pays" for="pays">Pays <span>*</span></label>
			<input type="text" id="pays" name="pays" value="<?php if(isset($_POST['pays']))  echo $_POST['pays'];?>"  required/>
		</li>

		
		<li> <label class="email" for="email">Email <span>*</span></label>
			<input type="email" name="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>"  required/> 
		</li>
		
		
		
		<li> <label class="telephone" for="telephone">Téléphone <span>*</span></label>
			<input type="tel" name="telephone"  value="<?php if(isset($_POST['telephone']))  echo $_POST['telephone'];?>"  required/> 
		</li>
		
		
	</ul>			
	</div>
</fieldset >		 
		
		
		
					
		<p class="buttons">

				<label for="checking" class="screenReader"></label><input style="display:none" type="text" name="checking" id="checking" class="screenReader" value="<?php if(isset($_POST['checking']))  echo $_POST['checking'];?>" />

				<input type="hidden" name="soumettre" id="soumettre" value="true" /><button type="submit">ENVOYER</button>
			
			</p>
		
		</ul>	
			
		</form>