W3C HTML validation errors

Hi! When I check my page with an chronoform form on it I get some chronoforms related errors:

[list]Bad value for attribute size on element input: The empty string is not a valid positive integer.[/list]
[list]Bad value for attribute maxlength on element input: The empty string is not a valid non-negative integer.[/list]

I believe these errors refer to empty values in the input fields like this:

<input name="organisatie" id="organisatie" value="" placeholder="" maxlength="" size="" class=" validate['required']" title="Vul uw organisatie in." style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />

Would it be possible for Chronoforms to not add these attributes when there is no value?

Kind regards,
Jip

Hi jj135,

I agree with you that ChronoForms should not add empty attributes - it's not helpful.

Until that happens, the simplest fix is probably to add values for them in the input settings.

Bob

Hi Bob,

Do you think will be changed in a later version? Or should I take some other action. like make this a feature request?

Kind regards,
Jip.

Hi Jip,

!!! Use with care - backup your forms before testing !!!

I don't know if Max has it on his to-do list or not. I have - I think found out how to do it and I'll get him to check this thread.

I edited the file /libraries/cegcore/helpers/html.php Around line 102 there is a public static function _concat() and I have added the two lines shown here:

				$k = str_replace(':', '', $k);
				if ( $v || $k == 'class'  ) { // add this line
					$v = str_replace('&', '&', $v);
					$out[] = $k.'="'.htmlspecialchars($v, ENT_QUOTES).'"';
				} // and this line
			}

Effectively that says "don't output the attribute if it has no value set unless it is the class attribute".

This changed my input HTML from

<input name="box_2" id="box_2" value="" placeholder="" maxlength="" size="" class="form-control A" title="" style="text-align: right;" data-inputmask="'alias' : 'decimal'" data-load-state="" data-tooltip="" type="text">

to

<input name="box_2" id="box_2" class="form-control A" data-inputmask="'alias' : 'decimal'" type="text" style="text-align: right;">

To get this to work on an existing form I had to edit the form, open an input re-save it, then re-save the form.

Bob

Great work Bob. When my client absolutely wants a 'green' W3C validation I now know how to achieve this, at least for the CF fields. I won't change this right now, because I prefer not to hack core files when not absolutely necessary.

I do hope Max will pick this up for a future release so we can all benefit from this in the future.

Kind regards,
Jip.

Hi Jip,

Max has this on this To Do list (but the list is long). My hack works OK in the front-end but seems to cause some problems in the back-end with the Setup tab (maybe I need to add style to the exceptions list???) so I have currently disabled it.

Bob