The W3Cs Validation tools

essential 1 Tallied Votes 241 Views Share

In for the latest addition to my code snippets, here's one you'll trully appreciate. This validation tools is packed with the W3Cs (x)HTML Markup validator, CSS validator, MobileOK tester and Semantics Extractor. hope you'll enjoy this newest addition of snippets'...

vmars commented: cool +2
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <title>The W3Cs Validator</title>
      <meta name="author" content="essential" />
   <style type="text/css" media="all">
   /* <![CDATA[ */
   /* Optimized to support 800x600 / 1024x768 ~ screen resolution */
   /* Module */
   html, body {
      border: 0;
      max-width: 1024px;
      min-width: 800px;
      width: 100%;
   }
   body {
      font-family: "Trebuchet MS", Verdana, Tahoma, Arial, sans-serif;
      font-size: 12pt;
      text-align: center;
   }
   /* Custom Headings */
   h1.logo { font-size: 170%; color: #f5f5f5; border-top: thin solid #506070;  border-left: thin solid #506070; border-right: thin solid #506070; background-color: #365d95; margin: 0; padding: 0.2em 1em 0.2em 1em; width: auto; text-align: left; white-space: nowrap; }
   /* Detailing */
   acronym[title] { border: 0; background-image: none; cursor: help; }
   acronym[title]:hover { cursor: help; }
   /* Table / Form */
   form { margin: 0 auto; padding: 1em 0 1em 0; width: 98%; } 
   input[type="button"] { vertical-align: middle; width: 95%; height: 70%; background-color: #eee; border: thin solid #506070; background-image: none; }
   input[type="text"] { height: 70%; margin: 0; width: 98%; vertical-align: middle;}
   input[type="checkbox"] { background-color: #eee; border: thin solid #506070; }
   label { display: block; white-space: nowrap;  }
   table {
      border-collapse: collapse;
      width: 100%; 
   }
      th { background-color: #365395; color: #f5f5f5; text-align: left; padding-left: 2%; height: 36px; }
      tr { line-height: 170%; }
      td.labels { background-color: #365495; width: auto; padding: 0; text-align: center; }
      td.url { background-color: #390; width: 100%; text-align: center; padding-left: 0.5em; }
      td.info {  line-height: 105%; padding-left: 2em;}
      td { padding-left: 1em; height: 30px; width: auto; text-align: left; }
   /* Layers */
   body div {
      border: 0;
      margin: 0;
      padding: 0;
   }
   div .tube {
      border: thin solid #506070;
      padding: 0.5em 1em 0.5em 1em;
      position: relative;
      text-align: left;
   }
   
   div .spacer {
      height: 2em;
      position: relative;
      width: 100%;
   }
   /* Layout */
   body #wrapper {
      margin: 0 auto;
      max-width: 1000px;
      width: 100%;
   }
   div #validation-field {
      background-color: #ccc;
      border: 1px solid #506070;
      color: #191970;
   }
   /* ]]> */
   </style>
   <script type="text/javascript">
/* <![CDATA[ */
function validateMarkup() {
   var thisUri = document.forms['frm1'].addr.value;
var validate = document.forms['frm1'];
var validator = validate.list.options[validate.list.selectedIndex].value;
   var sS = (validate.ss.checked && validate.list.selectedIndex == 0) ? validate.ss.value : '';
   var sO = (validate.so.checked && validate.list.selectedIndex == 0) ? validate.so.value : '';
   var sP = (validate.sp.checked && validate.list.selectedIndex == 0) ? validate.sp.value : '';
 var address = validator;
address += encodeURIComponent(thisUri) + sS + sO + sP;
window.location = address;
}

function addEvents() {
if (document.addEventListener) { 
document.forms['frm1'].btn.addEventListener('click',validateMarkup,false) }
else if (document.attachEvent) {
document.forms['frm1'].btn.attachEvent('onclick',validateMarkup); }
}
if (window.addEventListener)
window.addEventListener('load',addEvents,false)
else if (widow.attachEvent)
window.attachEvent('onload',addEvents)
else 
window.onload = addEvents;
/* ]]> */
   </script>
   </head>
   <body>
      <div id="wrapper">
      <h1 class="logo"><acronym title="World Wide Web Consortium">W3C</acronym>s Markup Validator</h1>
         <div class="tube">
         <div class="spacer"></div>
         <div id="validation-field">
            <form action="javascript:void(0);" id="frm1">
            <div>
               <table summary="W3Cs Validation Service">
                  <tr>
                     <td class="labels" colspan="2"><input type="button" value="check" id="btn" name="btn" /></td>
                     <td class="url"><input type="text" value="http://your-site-or-other-site.com" id="addr" name="addr" /></td>
                  </tr>
                  <tr>
                     <th colspan="2"><label>Additional Option</label></th>
                     <th><select name="list" size="1">
                              <option value="http://validator.w3.org/check?uri=" selected="selected">Markup Validator</option>
                              <option value="http://jigsaw.w3.org/css-validator/validator?uri=">CSS Validator</option>
                              <option value="http://validator.w3.org/mobile/?docAddr=">MobileOk Checker</option>
                              <option value="http://www.w3.org/2005/08/online_xslt/xslt?xmlfile=">Semantics Extractor</option>
                           </select>
                  </th>
                  </tr>
                  <tr>
                     <td><label>Show Source:</label></td>
                     <td><input type="checkbox" value=";ss=1" id="ss" name="ss" /></td>
           <td rowspan="3" class="info"><em>Please report any bug on this script...</em></td>
                  </tr>
                  <tr>
                     <td><label>Show Outline:</label></td>
                     <td><input type="checkbox" value=";outline=1" id="so" name="so" /></td>
                  </tr>
                  <tr>
                     <td><label>Show Parse:</label></td>
                     <td><input type="checkbox" value=";sp=1" id="sp" name="sp" /></td>
                  </tr> 
               </table>
            </div>
            </form>
         </div> <!-- #validation-field -->
         <p>This document is a <q>Valid <acronym title="Extensible Hypertext Markup Language">XHTML</acronym> 1.0 Strict</q> and validate as <acronym title="Cascading Style Sheet">CSS</acronym> Level 2.1</p>
         </div> <!-- tube -->
      </div> <!-- #wrapper -->
   </body>
</html>