asked on

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.

LajuanTaylor

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?

earwig75

ASKER

In order to publish the page it must pass the validation.

LajuanTaylor

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

LajuanTaylor

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

earwig75

ASKER

Yes, it's a management requirement. I supose I'll have to use jQuery for this one. Thank you for the responses.

_agx_

(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.

LajuanTaylor

@_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_

@LajuanTaylor - Gotcha, no worries. I am almost certain it's NOT possible to modify the cfform output, so jQuery is the way to go...

earwig75

ASKER

This field will not pass W3C markup validation.

ASKER CERTIFIED SOLUTION

earwig75

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

_agx_

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_

> 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

earwig75

ASKER

The field will not pass W3C validation.