I'm using express-validator version 6.14.1
My body object looks like this:
{
"sections":[
{
"data":{
"navigation":[
{
"name":"Facebook",
"href":""
},
{
"name":"Google To",
"href":"https://google.com"
}
]
},
"section_id":"123",
"key":"abcdefgh"
}
],
"key":"abcdefgh",
"title":"New Demo",
"description":"New Description",
"status":"done"
}
I need to check whether the href values inside navigation array are valid.
I tried the below solution, but it doesn't work. It always skips the validation and returns true.
check("sections.*.data.navigation.*.href")
.isURL()
.withMessage("Not a valid Link"),
What is the right approach to solve this?
Related
My redux store looks like this:
{
"stationsReducer":{
"origin":"something",
"dest":"something-else",
"bookmarks":[
{
"trip":{
"origin":"trip-something",
"legs":[
{
"train":{
"train_id":"123",
"details":{
"headsign":"blah blah",
"polyline":"some String"
}
}
}
]
}
}
]
}
}
Using the examples given in the redux-persist repo, I can blacklist objects that I can directly access for eg: I can blacklist the entire bookmark array. But I can't seem to blacklist something that is inside the array. I want to blacklist polyline property which is inside 2 arrays.
How can I go about doing it or is it even possible ?
We are using a custom json format for our i18n resources that contain comments for the translation bureau, so they understand better the context of the strings to translate:
Example en.json:
{
"headerbar": {
"search": {
"placeholder": {
"value": "Enter your search here...",
"comment": "This string will be shown in the search input if empty. Truncated after 100 characters."
}
},
"welcome": {
"heading": {
"value": "Welcome, {{name}}!",
"comment": "This string should not be longer than 50 characters."
}
}
}
How can I configure i18next (or react-i18next) such that the translation is always retrieved from the value property? Without having to use {returnObjects} in every t().
t('headerbar.search.placeholder') // === 'Enter your search here...'
t('welcome.heading', {name: 'Bob'}) // === 'Welcome, Bob!'
I also have this requirement, but it appears i18next does not have the capability to define comments or descriptions, because 1) the API doesn't have a way to define those, and 2) the most popular extractor, i18next-parser, doesn't support generating files with comments included.
Alternatively, you could consider Format.JS which has this capability:
https://formatjs.io/docs/getting-started/message-declaration
I'm stuck since a while on this problem now and I'm struggling to find answers or peoples that have experienced the same problem.
Also, I'm not a native English speaker and I'm new to programming, so sorry if it's not clear / if my approch is dumb as f
I decided to turn the Wordpress of my company to headless (on Nuxt). Everything was pretty fine until I tried to internationalized the app. The best solution (I think) to manage this task is to use nuxt-i18n, a tool to properly translate the app (strings, paths etc). But this solution seems to not be very compatible with data fetched from the Rest API.
For now I'm trying to passing the data from single page like that :
<script>
import SwitchL from '~/components/LanguageInput.vue'
export default {
components: {
SwitchL,
},
data() {
return {
fetchRestFr: null,
fetchRestEn: null,
i18nData: null,
}
},
i18n: {
messages: {
// help
}
},
methods: {
fetchSomeData() {
// Get page data in French
let fetchRestFr = this.$axios.$get(`https://www.company-site.com/wp-json/wp/v2/pages?include=42&lang=fr`);
// Get page data in English
let fetchRestEn = this.$axios.$get(`https://www.company-site.com/wp-json/wp/v2/pages?include=42&lang=en`);
// Assign data to null variables
this.fetchRestFr = fetchRestFr[0]
this.fetchRestEn = fetchRestEn[0]
// Build the i18n object
this.dataToI18n();
},
dataToI18n() {
if (this.fetchRestFr && this.fetchRestEn) {
let fr = this.fetchRestFr
let en = this.fetchRestEn
let data = {
messages: {
fr,
en
}
}
this.i18nData = data
}
},
},
created() {
this.fetchSomeData();
},
}
</script>
An other approch was to use the tag outside the template section like so :
<i18n>
// Inject the data generated from a function
{
"en": {
"data": "here"
},
"fr": {
"data": "ici"
}
}
</i18n>
But I don't find any solution to dynamically inject JSON here.
Last solution is to make things to preper way, by creating JSON file for i18n to referencing, but I think It will be pretty hard for me to do this, and to manage this on long term.
If you have advice, thoughts on this I will be very grateful !
You do usually use some JSON files directly. They will be stored into /locales/fr.json with something like this
{
"here": "ici"
}
Then, you'll access it into your template with
<template>
<p>{{ $t('here') }}</p>
</template>
And it will handle the fr/en switch by the several ways available (manual switch, checking browser's locale, URL's path, cookie etc).
You can check nuxt-i18n's documentation for this and get a proper simple setup quickly here: https://i18n.nuxtjs.org/
Usually, you won't need to use the i18n tag anymore but if you still need to, you can do as explained here: https://i18n.nuxtjs.org/per-component-translations
I understand with Vue JS 2, you have to declare reactive properties upfront.
However, just wondering how would you do a rest call if the child objects appear depending on a few other conditions. For example:
"abc": {
"tests": [
{
"a1": "xxxx",
"result": null,
"selected": false,
"comment": null
} ...
]
}
Now in this example, what happens if the tests are empty ((null)) in some circumstances?
eg: if you bind it using the v-model xx.xx.abc.tests[1].selected - This wont work as tests[1] is null.
So I tried using Vue.set in mounted function to assign a default value but that did not work. It will be hard to define all these in a static data as then I have to know all the tests before the rest call.
Looking at the Vue warning when accessing nested object the issue is if I do the check for inside
the checkbox (Checkbox is rendered from Spring MVC tag).
<form:checkbox id="xx" path="..Spring MVC Path.." v-if="(xx.xx.abc.tests!=null && xx.xxx.abc.tests[3].selected)" **v-model**="xx.xxx.abc.tests[3].selected"/>
The checkbox does not appear at all. I want it to appear regardless of empty value as it gives users to add the option. Also, the other option of statically declaring it does not work as I don't know want to hard code and define array.
for example that means in case another element is added it is hardcoded into script:
[
{
"testName": String,
"result": String,
"selected": false,
"comment": String
},
{
"testName": String,
"result": String,
"selected": false,
"comment": String
}
]
Basically I need to bind using v-model even if it is null in this case. Tried Vue.set but for some reason did not appear to work.
I guess I am missing something here,any help would be appreciated.
Assume that you have a list of checkbox to render whether the child element is null on not. but you do know the array length, right?
If you do, consider use v-for to render checkboxes (then you’re able to track array item by index) and listening on its change event then assign specific value to specific object when events fire
thanks for the replies. As this was due to rest call not returning all required attributes that was defined in Vue model(As mentioned in question).So I checked that in final section of rest call and if they are empty, created them.
axios
.get(***URL***)
.then(
response => {
this.info = response.data;
this.status.loaded = true;
}
)
.finally(
() => {
*** check and fill missing attributes with default values ***
**Example: this.$set(this.someObject, 'b', 2)
}
)
Reference:
https://v2.vuejs.org/v2/guide/reactivity.html
I've looked at many posts on this and have it working to the extent that it does validate my fields when I add the following.
$.validator.setDefaults({
ignore: []
});
The part I'm still missing is adding the input-validation-error class to notify the user. It is working fine for my other input elements (non-kendo). I've tried adding the class manually in $.validator.setDefaults as well but nothing seems to be working.
Is there an example out there somewhere or has anyone gotten it to work?
I'm not certain I'm doing this right but here's what I've tried to add it manually.
$.validator.setDefaults({
ignore: [],
errorClass: "input-validation-error",
errorElement: "input",
highlight: function (element, errorClass) {
$(element).addClass(errorClass)
},
unhighlight: function (element, errorClass) {
$(element).removeClass(errorClass)
}
});
I found a solution to this based on this post. Basically what you need to do is look for the parent element that the input is wrapped in. Something like this:
$.validator.setDefaults({
ignore: [],
highlight: function (element, errorClass) {
element = $(element);
if (element.parent().hasClass("k-widget")) {
element.parent().addClass('input-validation-error');
} else {
element.addClass('input-validation-error')
}
},
unhighlight: function (element, errorClass) {
element = $(element);
if (element.parent().hasClass("k-widget")) {
element.parent().removeClass('input-validation-error');
} else {
element.removeClass('input-validation-error')
}
}
});
I would advise anyone though to visit the post I've linked to above before taking off down this particular rabbit hole as it introduces another issue, just to be aware of what you're getting into. The excepted answer is really more relevant to this question than the one being asked there.