Is there a way to validate HTML syntax in Vue? [duplicate]

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 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
– sideshowbarker, Commented Jun 5, 2019 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
– Axel, Commented Jun 5, 2019 at 11:42

atxpunkrock · Accepted Answer · 2021-04-14 11:05:23Z

1

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.

answered Apr 14, 2021 at 11:05

atxpunkrock

5148 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Moshe Katz · Accepted Answer · 2022-04-06 19:03:33Z

0

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

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

edited Apr 6, 2022 at 19:03

Moshe Katz

16.5k7 gold badges71 silver badges127 bronze badges

answered Apr 6, 2022 at 19:01

Fábio Ávila

1

1 Comment

Fábio Ávila Over a year ago

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

Collectives™ on Stack Overflow

Is there a way to validate HTML syntax in Vue? [duplicate]

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related