This question already has answers here:
Check if HTML snippet is valid with JavaScript
(9 answers)
Closed 4 months ago.
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
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.
You need to wrap it in a div to work, follow example below
<v-runtime-template :template="`<div>${template}</div>`"/>
Related
So I'm making an app right now that's using a package called vue-csv-import and in the docs it tells me that I can define my custom element inside the vue-csv-input component it provides which exposes two slot props v-slot="{file, change}". I've been clawing my eyes out trying to find a way for my code to work. I tried doing it like this but it doesn't work. It somehow can't find my uploaded file in my custom file input but the component works when I'm not defining a custom input and just use the default input the package provides. The package documentation has no examples on how to do actually use the slot props for a custom file input so I can't rely on that.
MyComponent
<vue-csv-input v-slot="{file, change}">
<label for="finput" class="fancy-upload-btn">Upload CSV File</label>
<input #change="change" type="file" name="file" id="finput">
</vue-csv-input>
VueCsvInput from vue-csv-import
<template>
<slot :file="file" :change="change">
<input ref="csvRef" type="file" change="change" :name="name" v-bind="$attrs">
</slot>
</template>
What's inside the change function in VueCsvInput
const change = function () { let tmpFile = csvRef.value.files ? csvRef.value.files[0] : null;
if (validate(tmpFile)) { VueCsvImportData.file = tmpFile;
}
}
I've tried ddding ref="csvRef" to my custom file input but doesn't work either. It always ends up not getting the uploaded the file and the package documentation has no examples on using it with a custom file input, only that it provides the props to do so.
Your help would be highly appreciated. If you have an alternative package to recommend then that would be nice too.
I'm trying to wrap my head around how to wire up a simple button in BigCommerce Stencil. I've been using this platform for about 24 hours now, so any help you can give is MUCH appreciated!! I haven't used Handlebars.js or jQuery in a few years so I'm pretty rusty.
I'm using the Cornerstone Theme.
What I'm looking to do is:
Click a button
Array of objects sent to my JS function
JS Function adds all the items in the array to the cart.
I feel like this shouldn't be that hard, but where I am getting stuck is.
Getting data that is available in the HTML to be available to my function.
handleButtons() {
$('#add-all-to-cart').on('click', (event) => this.addAllItemsToCart(event));
$('#remove-all-from-cart').on('click', (event) => this.removeAllFromCart(event));
}
//I want to supply {{category.products}} from the HTML
addAllItemsToCart(e) {
console.log('Adding all items to cart');
}
removeAllFromCart(e) {
console.log('Removing all items from cart');
}
And on the HTML side, I have
//This seems to be the way other buttons were made in the Theme
<input id='add-all-to-cart'
data-wait-message="{{lang 'products.adding_to_cart'}}"
class="button button--small"
type="submit"
value="{{lang 'products.add_all_to_cart'}}" />
<input
id="remove-all-from-cart"
data-wait-message="{{lang 'products.adding_to_cart'}}"
class="button button--small"
type="submit"
value="{{lang 'products.remove_all_from_cart'}}" />
The technically correct way of doing this would be to utilize the inject helper. This passes data through to the JS Context within the theme JavaScript files. Assuming you are in a file with access to this context (such as category.js), you could use the following code.
In your HTML: {{inject "categoryProducts" category.products}}
In your JS: console.log(this.context.categoryProducts);
I am using Vue CLI and Bootstrap and am having trouble with the form validation currently when the page loads all the input fields load as invalid. I can see why this is happening because the input fields are getting a class of is-invalid. I have fixed this by passing the state prop a value of null when it is false. It does not seem like the default behavior should be to run the validation when the page loads but maybe it is. I believe I have everything set up correctly as far as structure and proper classes I followed the bootstrap-vue docs.
My Code
<b-form
#submit.prevent="addReview"
name="review-form"
class="needs-validation"
novalidate
>
<div class="name">
<label class="sr-only" for="form-input-name">Name</label>
<b-input
id="form-input-name"
class="form-inputs mb-2 mr-sm-2 mb-sm-0"
v-model="name"
placeholder="Name"
required
:state="isEmpty(this.name) ? true : null" <---- My problem is here
></b-input>
...
</b-form>
My problem is I need 3 results from this ternary which obviously isn't possible. I need null on load to remove the error messages then false to display error on validation and true to display valid input. I have been struggling with this for days so any help with any aspect of this setup would be greatly appreciated if you want more code let me know. The submit button adds a class of was-validated which does display any error messages that are associated with empty inputs but doesn't validate the inputs.
Question
How do I validate inputs while still keeping form error messages hidden on load.
You aren't bound to just using a ternary statement in the :state prop - you can hook :state up to a computed property directly, which will achieve three things (this is similar to what is shown in the documentation):
We can have more than two conditions, breaking out of the limitations of the ternary statement.
The computed property will analyze user input on the fly, ensuring real-time validation of the form input.
Our template code will be cleaner and more readable (important).
I'm working loosely off of your example, but something like the following should solve your issue:
<template>
<div id="app">
<img width="25%" src="./assets/logo.png" style="margin-bottom: 15px;">
<b-form>
<div class="name">
<label class="sr-only" for="form-input- name">Name</label>
<b-input v-model="name" id="form-input-name" :state="isNameStateValid"></b-input>
</div>
</b-form>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
name: ""
};
},
methods: {
isValid() {
return this.name.length > 3 ? true : false; //your validation criteria goes here
}
},
computed: {
isNameStateValid() {
if (this.name) {
return this.isValid(this.name);
}
return null;
}
}
};
</script>
In the above, you would have a method that would check for your specific validation criteria (isValid, isEmpty, etc.).
Our new computed property, isNameStateEmpty, will use that method's return value, returning false for a validation failure (triggering BootstrapVue's failed validation state), true for a validation pass, or null in the event that this.name does not have a current value (examples being a fresh page load, or a user clearing the input field, making it blank).
See a working Codesandbox of this behavior here.
Because the input's v-model (v-bind:value and #change) is set to our "name" data property, every character change within the input field will reactively update our data property (this.name).
Because our isNameStateValid computed property has a dependency of this.name, it will reevaluate on every change of the this.name data property - ensuring real-time validation using BootstrapVue's validation state.
Hopefully that helps.
Im using vue-drag-resize from https://github.com/kirillmurashov/vue-drag-resize.
I can't focus and type anything inside input text field if it is placed inside vue-drag resize component. Does anybody know solution how to fix this problem?
I've faced this issue when I'm using vue-drag-resize npm on my vue project.
In the vue-drag-resize container, input field didn't work.
So I fixed it with input focus function
This is Code Example
<template>
<VueDragResize>
<input v-model="name" ref="input" #click="inputClicked" />
</VueDragResize>
</template>
<script>
...
...
methods: {
inputClicked() {
this.$refs.input.focus()
}
}
</script>
Sometimes, we will have "... .focus is not a function" error.
If you faced this error, please try like this
this.$refs.input[0].focus()
this.$refs.input.$el.focus()
Either one will work.
#activated="onActivated"
methods: {
onActivated() {
this.$refs['yourinput'].focus();
}
This question already has an answer here:
Component to inject and interpret String with HTML code into JSF page
(1 answer)
Closed 7 years ago.
I am trying to develop something like this:
In a manged bean, there are String properties that are written in an valid HTML fashion, i.e:
String script = "alert(\"hello!!!!!\");";
String div = "Hello!"
And the purpose for these fields is to dynamically put html components onto the .xhtml file. But if these fields are accessed normally it seems they are only added to the page as text. Is there anyway I can achieve these?
Also, since the actual content of these fields can be quite complicated and the design is to be dynamic, just putting the component in the .xhtml is not an option.
You can use <h:outputText> together with escape="false". That way the generated stuff will be html code rather than just some text.
e.g., let myBean be the managed bean with the following code,
String div = "<div>Hello World</div>";
In your .xhtml, you would write,
<h:outputText value="#{myBean.div}" escape="false" />
This would result in <div>Hello World</div> being injected as a part of the html code, in other words the <div> tag would be recognized.
Similar thing could be mocked for javaScript code as well, e.g.,
String scriptCode = "<script>function alertHello(){alert('Hello World')}</script>";
In your .xhtml, you would write,
<h:outputText value="#{myBean.scriptCode}" escape="false" />