Is there a way to validate HTML syntax in Vue?

Question

I have an component which basically takes everything from input and renders the html:

<template>
    <div>
        <input type="text" v-model="html">
        <VRuntimeTemplate :template="html" />
    </div>
</template>

<script>
import VRuntimeTemplate from 'v-runtime-template'

export default {
    data: () => ({
        html: ''
    }),
    components: {
        VRuntimeTemplate
    }
}
</script>

Now when I start to type then it will obviously throw me the error saying the input value doesn't have closing or ending tag.

Is there a way to validate HTML beforehand? It works fine with v-html but there's a problem with third party modules.

Sandbox: https://codesandbox.io/s/vruntimetemplate-27bdz?fontsize=14

You probably want to edit/update the question to be much more clear about what exactly do you mean by “validate HTML beforehand?”. The entire purpose of the https://codesandbox.io/s/vruntimetemplate-27bdz?fontsize=14 form seems to be enable users to type in input with markup (with that getting (re)checked/(re)validated every single time the hits a key or enters any character into the input field… Why?) — so, given that, it’s not clear what you mean by “beforehand”. Before what? — sideshowbarker, Jun 05 '19 at 11:24
@sideshowbarker I used the word beforehand because I want to validate the input first and then send the input as prop if it is valid. Well the current setup doesn't work like this way but I just want some way to validate HTML. Just validate HTML, nothing else. If I don't do this then on every keystroke, `v-runtime-template` will flood console with errors. — Axel, Jun 05 '19 at 11:42

score 1 · Answer 1 · answered Apr 14 '21 at 11:05

Depending on when you need to validate the HTML there are a couple of options.

To validate input dynamically you can follow this answer: Check if HTML snippet is valid with JavaScript

If you want to validate the HTML output of the Vue Component there is a vue-cli plugin here: https://gitlab.com/html-validate/html-validate-vue

I ran into the same issue and ended up going with the first option as I need to validate user supplied HTML that will be emitted in another vue app.

score 0 · Answer 2 · edited Apr 06 '22 at 19:03

0

You need to wrap it in a div to work, follow example below

<v-runtime-template :template="`<div>${template}</div>`"/>

edited Apr 06 '22 at 19:03

Moshe Katz

15,992
7
69
116

answered Apr 06 '22 at 19:01

Fábio Ávila

1

– Fábio Ávila Apr 06 '22 at 19:01

Is there a way to validate HTML syntax in Vue?

2 Answers2