W3C compliance error during HTML Validation

[ajoo]

Hi all !

I am passing JSON ENCODED data as the img src data and I get the following error when i validate my page for HTML

Bad value “/image/image_draw.php?caption=Wrn&gd1={"2018-10-10":50,"2018-10-11":40,"2018-10-12":40,"2018-10-13":0,"2018-10-14":30}&gd2=&gd3=&gd4=” for attribute “src” on element “img”: Illegal character in query: “{” is not allowed.

How can I get rid of this error? I am passing data as JSON_ENCODED.

Thanks all !

[requinix]

What is your code to generate that output?

[ajoo]

Hi requinix,

Thanks for the response.

The data is pulled out of a database and json_encoded.

<?php echo "<img src='/image/image_draw.php?caption=Wrn&gd1=$G_wrn_w_data&gd2=$G_mtl_w_data&gd3=$G_mol_w_data&gd4=$G_dov_w_data' alt='graphs'/>"; ?>

which gets translated into HTML as

<img src='/image/image_draw.php?caption=Wrn&gd1={"2018-10-10":50,"2018-10-11":40,"2018-10-12":40,"2018-10-13":0,"2018-10-14":30}&gd2=&gd3=&gd4=' alt='graphs'/>
			

The problem is due to the curly braces which HTML does not validate. My graph however displays correctly. If I ignore the error of the validator, i am good but i don't wish to do that.

To generate the output I am using the phpGraphlib library by Elliott Brueggeman. I believe it may be obsolete but my graphs draw just fine !

after decoding the encoded json data
.
.
.

$graph->setTitle('caption');
$graph->setBars(true);
$graph->setLine(true);
$graph->setRange(100,0);
// $graph->setupYAxis(500, 'black');
// $graph->SetupXAxis(1200,'black');
$graph->setDataValues(true);
$graph->setDataValueColor('maroon');
$graph->setGoalLine(35);
$graph->setGoalLineColor('red');
$graph->createGraph();

I hope that answers your question.

Thanks.

[requinix]

When building query strings with anything more complicated than simple alphanumeric values, use http_build_query.

Then, because you'll be putting this into HTML, you must also use htmlspecialchars(). You're using single quotes for the attribute value so you'll need the ENT_QUOTES flag.

<?php echo "<img src='/image/image_draw.php?", htmlspecialchars(http_build_query([
  "caption" => "Wrn",
  "gd1" => $G_wrn_w_data,
  "gd2" => $G_mtl_w_data,
  "gd3" => $G_mol_w_data,
  "gd4" => $G_dov_w_data
]), ENT_QUOTES), "' alt='graphs'/>"; ?>

 

[ajoo]

Hi requinix,

I'll try it out and revert. 

Thanks loads.

[ajoo]

Hi Requinix,

It worked  & the error is gone !

Thanks loads.