Validate HTML tag with MUSTACHE variables

MUSTACHE is one of the great template driven system. It is a logic-less syntax. Logic-less meaning it just tag-based template system that replaced with the value.

Where to use MUSTACHE?

In a simple word, I can say that

“where you will have some fixed-format forms or templates, you can easily add MUSTACHE”.

Believe me, it is too easy to configure on the frontend (with JavaScript) as well on backend such as Node, ColdFusion, etc.

It solves many issues of mine. Likewise, in the development, many times client request a form that has the same format, but values will be dynamic. For example, implementing mail-merge kind of feature on the web, showing template design runtime to the folks, just configure the inputs and show “How will your template look like”.

I used with MUSTACHE whenever I need templating or form generation than my mind first call to MUSTACHE.

Click to read more about MUSTACHE

Where was I am facing issues to deliver dynamic content with MUSTACHE?

Glimpse of the issues. There will be more challenges when the customize features come on the board. In one of the projects, we have a function to convert HTML file to Document where client needs to generate their own format with custom value. They don’t know about the MUSTACHE or anything related technical. After giving training to them about {{MUSTACHE TAG}}, they started generating templates with {{custom tags}} and it works most of the times but sometimes forget to end tag {{/custom tag}}. That causes the issue. A system encounters “HTML end tag error”.

Solutions:

It has been fixed by validating tag via XML validator. In order to validate we have used CFML scripting languages. CFML is a robust tag-based server-side language. Using CFML you can develop dynamic web application like other technologies such as Node, PHP, DotNet, etc.

I used XMLValidate() function to validate and that’s it, my issue is solved. This function validates the generated template and give hints to the consumer so they can quickly fix the form.

Below is an example.

In the above example, you can see the {{/Customer}} block end before ending </tr>. This type of mismatch configuration syntax will mess the template design and that is why, I have to validate the custom generated template before submitting and it solves lots of mismatch issues.

Since I am CFML developer so I tried validate with CFML languages but you can also try with other technologies as well. Here I just explain the scenario there I was facing and resolved.

 

Thanks for Featured Image by OpenClipart-Vectors from Pixabay



Leave a Reply