My datefield will not pass W3C validation

I have a ColdFusion datefield (<cfinput type="datefield"....  ) and it will not pass the W3C validation. The error is below. Does anyone know if coldfusion uses a different DTD or DOCTYPE or something else to avoid this? Thank you.

value of attribute "type" cannot be "datefield"; must be one of "text", "password", "checkbox", "radio", "submit", "reset", "file", "hidden", "image", "button" …kDate" id="BlockDate"  type="datefield" class="datefieldinput"  size="38"  sty…

The value of the attribute is defined to be one of a list of possible values but in the document it contained something that is not allowed for that type of attribute. For instance, the “selected” attribute must be either minimized as “selected” or spelled out in full as “selected="selected"”; a value like “selected="true"” is not allowed.
earwig75Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

LajuanTaylorCommented:
The problem is more to do with the W3C standard not allowing input tags to have an attribute type of "datefield".  Which, results in cfinput failing validation.

Most web pages that use any type of server-side language never return HTML that validates completely against W3C validator tools. That goes for PHP, ASP, ASP.NET, CFML, etc.

 Are you focused more on W3C compliance for multi-browser support or 508 Accessibility requirements?
earwig75Author Commented:
In order to publish the page it must pass the validation.
LajuanTaylorCommented:
Understood... There has to be some sort of practical trade-off though. For example, the following code snippet passes an online W3C validation check. However, the just by changing the form to cfform and input to cfinput the returned html fails validation. That's with bypassing ColdFusion's "datefield" type attribute completely.

<!-- passes HTML Validation: https://validator.w3.org/#validate_by_input+with_options -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>jQuery UI Datepicker</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"type="text/javascript"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"type="text/javascript"></script> 
    
  <script type="text/javascript">
  $(function() {
    $( "#udf_00" ).datepicker();
  });
  </script>
   </head>
   <body>
  <div> 
<label>Start Date:<br></label>
<form name="registration" id="registration" method="post" action="jsdate-pick.cfm"> 
<p>
	<input  type="text" name="udf_00" id="udf_00"><br><br>
	<input  type="submit" name="send" id="send">
</p>    
</form>

</div>
</body>   
</html>

Open in new window

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

LajuanTaylorCommented:
I don't know if it's upper management or a client where W3C validation is the sticking point, but there should be balance across multiple checkpoints:
Accessibility - check against WCAG and Section 508 guidelines
Broken Links - check for broken links and spelling errors
Compatibility - check for HTML, script and image formats that don't work in common browsers
Search Engine Optimization - check Google, Bing and Yahoo webmaster guidelines
Privacy - check for compliance with US law
W3C Web Standards - validate HTML and CSS
Usability - check against Usability.gov guidelines
earwig75Author Commented:
Yes, it's a management requirement. I supose I'll have to use jQuery for this one. Thank you for the responses.
_agx_Commented:
(no points...)

However, the just by changing the form to cfform and input to cfinput the returned html fails validation.

@LajuanTaylor - I don't have time to check it now, but do you know it fails? Is it all that JS/CSS junk CF adds when cfform elements are used?

@earwig75 - Regarding your original question, I'm almost positive the HTML used by CF isn't customizable to the extent you're talking about.  IIRC the internal classes build the HTML/CSS/JS on the fly as a big string, using the tag attributes.  So AFAIK you can only adjust it after the fact - by capturing the generated Text and doing a bunch of replacements. Obviously that is extremely hackish and not the way to go.
LajuanTaylorCommented:
@_agx_ - I must have been tired... I retested using the online W3C validation tool  and the resulting JS/CSS generated by CF passed.

@earwig75 - The only caveat is that I used jQuery for the datepicker instead of the built-in CF datepicker.

Here's the resulting HTML that CF generated, which passed validation:
<!-- passes HTML Validation: https://validator.w3.org/#validate_by_input+with_options -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head><script type="text/javascript" src="/CFIDE/scripts/cfform.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/masks.js"></script>

      <title>jQuery UI Datepicker</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"type="text/javascript"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"type="text/javascript"></script> 
    
  <script type="text/javascript">
  $(function() {
    $( "#udf_00" ).datepicker();
  });
  </script>
   <script type="text/javascript">
<!--
    _CF_checkregistration = function(_CF_this)
    {
        //reset on submit
        _CF_error_exists = false;
        _CF_error_messages = new Array();
        _CF_error_fields = new Object();
        _CF_FirstErrorField = null;


        //display error messages and return success
        if( _CF_error_exists )
        {
            if( _CF_error_messages.length > 0 )
            {
                // show alert() message
                _CF_onErrorAlert(_CF_error_messages);
                // set focus to first form error, if the field supports js focus().
                if( _CF_this[_CF_FirstErrorField].type == "text" )
                { _CF_this[_CF_FirstErrorField].focus(); }

            }
            return false;
        }else {
            return true;
        }
    }
//-->
</script>
</head>
   <body>
  <div> 
<label>Start Date:<br></label>
<form name="registration" id="registration" action="jsdate-pick.cfm" method="post" onsubmit="return _CF_checkregistration(this)"> 
<p>
	<input name="udf_00" type="text" id="udf_00"  /><br><br>
	<input name="send" type="submit" id="send"  />
</p>    
</form>


</div>
</body>   
</html>

Open in new window

_agx_Commented:
@LajuanTaylor - Gotcha, no worries.  I am almost certain it's NOT possible to modify the cfform output, so jQuery is the way to go...
earwig75Author Commented:
This field will not pass W3C markup validation.
earwig75Author Commented:
I've requested that this question be closed as follows:

Accepted answer: 0 points for earwig75's comment #a40815428

for the following reason:

This field will not pass W3C markup validation.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
_agx_Commented:
While it's not the answer you want to hear, it is not possible.  As I mentioned, CF doesn't allow you to customize the HTML.  So your only options are to switch to jQuery as LajuanTaylor suggested or capture the generated HTML and modify it with string functions/regex's (not recommended).
_agx_Commented:
> I've requested that this question be closed

Oops, I thought you were deleting the question instead of accepting LajuanTaylor's comment as the answer.  Sorry, my bad.  I withdrew the objection in the automated request for attention.  Hopefully the mods will fix it shortly.

Edit:  It should be fixed now
earwig75Author Commented:
The field will not pass W3C validation.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.