Blocklayered (product filter) valide code

[imperator]

Hello, I use presta 1.6.1.4 and don't know wheter i use the right thread but i wanto to try a html valide code.

I'm quite success but product filter consist of <ul> items and validator show me these results : 

 

Element label not allowed as child of element ul in this context. (<label for="price">)

Element span not allowed as child of element ul in this context. (<span id="layered_price_range">)

 Element div not allowed as child of element ul in this context. (<div class="layered_slider_container">)

Element select not allowed as child of element ul in this context. (<select class="select form-control" >)

The value of the for attribute of the label element must be the ID of a non-hidden form control. (<label for="price">)

 

There is quite complex code for this filter in blocklayered.tpl. Someone try to rewrite code for html validity ? 

Many thanks

 

[ApoA]

hello,

well from what i see, there must be a part of your code where ul is not followed by li element, so try putting li inside ul elements first.

and for this one

"The value of the for attribute of the label element must be the ID of a non-hidden form control. (<label for="price">)",

you have to replace the value of "for" attribute in this case, there must be some element like an input element that is connected to this label, so if that input element has an id, then put it in the "for" attribute, it should be like this "<label for="idOfSomeElement">"

[imperator]

Hello, thanks for answer, yes i found it

it is "range" in filter in blocklayered.tpl in themes/modules

{if $filter.filter_type == 0}
                                    <label for="{$filter.type}">
                                        {l s='Range:' mod='blocklayered'}
                                    </label> 
                                    <span id="layered_{$filter.type}_range"></span>
                                    <div class="layered_slider_container">
                                        <div class="layered_slider" id="layered_{$filter.type}_slider" data-type="{$filter.type}" data-format="{$filter.format}" data-unit="{$filter.unit}"></div>
                                    </div>

 

and in "select" filter

 

{else}
                                        <select class="select form-control" {if $filter.filter_show_limit > 1}multiple="multiple" size="{$filter.filter_show_limit}"{/if}>
                                            <option value="">{l s='No filters' mod='blocklayered'}</option>
                                            {foreach from=$filter.values key=id_value item=value}
                                            {if $value.nbr || !$hide_0_values}
                                                <option {if isset($value.color)}style="color:{$value.color}"{/if} id="layered_{$filter.type_lite}{if $id_value || $filter.type == 'quantity'}_{$id_value}{/if}" value="{$id_value}_{$filter.id_key}" {if isset($value.checked) && $value.checked}selected="selected"{/if} {if !$value.nbr}disabled="disabled"{/if}>
                                                    {$value.name|escape:'html':'UTF-8'}{if $layered_show_qties} ({$value.nbr}){/if}
                                                </option>
                                            {/if}
                                            {/foreach}
                                        </select>

 

but this code is generated inside foreach where is <ul> in begining... 

[imperator]

Ok I got it. 

I put a <li> before  <select class="select form-control".... in line 128

and before <label> {l s='Range:' mod='blocklayered'}.... in line 145

And now is category page with filter html valid