Additionally, three more issues regarding validation and/or weaknesses have been discovered.
The first relates to another invalid attribute which is applied to the 'select' element. It contains 'type="select"'. The 'type' attribute is not allowed on 'select' elements.
The second is a weakness when using JavaScript to show and hide fields in a form, and it is an instance where a duplicate 'id' attribute can be defined.
Below are two inputs—different in appearance, but storing to the same data field—which are toggled depending on a different selector.
<!-- Input A-->
<div class="ccms_form_element cfdiv_text" id="date_container_div"><label for="date">Date</label><input id="date" maxlength="150" size="16" class="validate['required']" title="" label_over="0" hide_label="0" type="text" value="" name="date" />
<div class="clear"></div><div id="error-message-date"></div></div>
<!-- Input B-->
<div class="ccms_form_element cfdiv_text" id="start_date_container_div"><label for="date2">Start Date</label><input id="date2" maxlength="150" size="16" class="validate['required']" title="" label_over="0" hide_label="0" type="text" value="" name="date" />
<div class="clear"></div><div id="error-message-date"></div></div>
Note the 'id' attributes of the two fields are
'id="date"' and
'id="date2"' respectively. Second, note that both fields are (intentionally) set with
'name="date"'. Finally, note that both fields have an error container element of
'id="error-message-date"'. It appears that the error container element's 'id' attribute is constructed from the 'name' attribute of the input element and not the 'id'. Because of this, it creates a situation where invalid HTML can be constructed.
The recommended correction to this problem would be to modify the method by which the error message container element is set so it uses the 'id' and not the 'name' element. This also requires the validator JavaScript to be modified to assign the value of an error message to an 'id' set in a similar manner. Doing this will prevent the possibility of this element generating invalid HTML.
Finally, and similarly to the second issue reported here, the 'id' attribute of the form line container element is assigned an 'id' attribute that is constructed off the inner HTML of the label element and not the 'id' of the field and/or the 'for' of the <label>. There are two observed behaviours with this that are problematic.
The first is a situation where again invalid HTML can be generated, if two fields within one ChronoForm are assigned the same label. Below is a code snippet generated by ChronoForms.
<!-- Field A -->
<div class="ccms_form_element cfdiv_select" id="building_name_container_div"><label for="building">Building Name</label><select size="1" label_over="0" hide_label="0" id="building" class="validate['required']" title="" type="select" name="building">
<option value="">-- Select --</option>
<!-- ... -->
</select>
<div class="clear"></div><div id="error-message-building"></div></div>
<!-- Field B -->
<div class="ccms_form_element cfdiv_select" id="building_name_container_div"><label for="building2">Building Name</label><select size="1" label_over="0" hide_label="0" id="building2" class="validate['required']" title="" type="select" name="building">
<option value="">-- Select --</option>
<!-- ... -->
</select>
<div class="clear"></div><div id="error-message-building"></div></div>
Note that the above fields have an 'id' of
'id="building"' and
'id="building2"' respectively. Note also that the 'id' of the form line container element is
'id="building_name_container_div"' for both, which creates a situation where the HTML is invalid from two instances of the same 'id' attribute.
The second issue is related, though to my knowledge, does not create a situation where HTML might be invalid, but rather creates a very verbose 'id' attribute of the form line container element. For example in the code below:
<div class="ccms_form_element cfdiv_checkbox" id="i_agree_to_accept_the_terms_and_conditions_as_set_forth_in_the_link_above_and_agree_to_adhere_to_these_terms_upon_my_submission_of_this_form_container_div"><input value="Accepted" id="accept_terms" label_over="0" hide_label="0" title="" type="checkbox" class="validate['required'] label_right" name="accept_terms" />
<label for="accept_terms" class="full_label">I agree to accept the terms and conditions as set forth in the link above and agree to adhere to these terms upon my submission of this form</label><div class="clear"></div><div id="error-message-accept_terms"></div></div>
Note that the 'id' is unnecessarily long, due solely to the fact that the label contains a long string of text. While this may be valid, it makes the code less efficient through 'bloat' which in turn requires more bandwidth and ultimately impacts the performance of the page load time.
The recommended fix to both of these problems would be to modify the construction of the form line container element's 'id' attribute to be constructed from the label element's 'for' attribute (which will mimic the 'id' of the field). This will both ensure that the HTML can be valid as well as efficient.