Vee Validate custom required_if rule doesn't computes required - javascript

I am using Vee-validate 2.2.3 on project and trying to use custom required_if rule.
The problem that it doesn't changes required flag on ValidationProvider to true, it always false, so user cannot see that some field became required.
At the same time - validation works well and error messages are shown\hidden when needed.
Examples of code:
this.$validator.extend('customRequiredIf', customRequiredIf, {
hasTarget: true,
computesRequired: true,
});
const customRequiredIf = (value: any, [target, operation, operationValue] : any) => {
let conditional = operationValue.length !== 0;
if (conditional) {
return {
valid: value !== undefined && value !== null && value !== "",
data: {
required: value !== undefined && value !== null && value !== "",
}
};
}
return {
valid: true,
data: {
required: true
}
};
};
What i am doing incorrectly?
Small demo (even though i have always return "required: true", flag "required" - always "false"):
https://codesandbox.io/s/vue-template-4vd30?file=/src/App.vue

Related

Filtering Javascript array of objects by account type

I have a javascript array that contains objects which have a few properties of which there are some booleans. I want to take the user's account type and filter out the ones that don't apply to them. I've included the filter code I have tried however it isn't working because it is filtering out if only one of the if statements come true. I understand this but am unsure how to resolve it.
Filter code
if(acc_type != 'Admin') {
this.items = this.items.filter((item) => {
return item.admin != true
})
}
if(acc_type != 'Manager') {
this.items = this.items.filter((item) => {
return item.manager != true
})
}
Some objects from array this filter are acting on
{ header: "Management", admin: true, manage: true },
{
title: 'Creation Form',
to: '/management/creation-form',
admin: true,
manage: true,
},
{
title: 'Management',
to: '/management',
admin: true,
manage: true,
},
{ header: "Settings" },
{
title: 'Account',
to: '/settings/account',
admin: true
},
{
title: 'Billing',
to: '/billing',
admin: true
},
From how I understand:
this.items = this.items.filter(function(item){
if(acc_type == 'Admin')
return item.admin || !item.manager
else if(acc_type == 'Manager')
return item.manager || !item.admin
else // any other acct
return !item.admin && !item.manager
})
this.items = this.items.filter((item) => {
return acc_type != 'Admin' && item.admin != true &&
acc_type != 'Manager' && item.manager != true
})
Simply turn around your logic to make it work.
If it is an 'Admin' account, every item having admin: true should be in the resulting list. If the account is is 'Manager', everything having manage: true should be in the resulting list.
if (acc_type === 'Admin') {
this.items = this.items.filter(item => !!item.admin);
}
else if (acc_type === 'Manager') {
this.items = this.items.filter(item => !!item.manager);
}
According to this, for 'Admin' accounts all entries will be in the resulting list, for 'Manager' accounts there will be only the first two entries.
Don't be confused by the !! - it's only a boolean conversion. For this example it can be omitted.

Block input type radio in React

everyone. I have a problem that arises after changing excluding params. I use Redux to save all params data but I have an incomprehensible error. I add a video that shows that problem. Also, I attach some code parts. All elements are memo. Events are disabled after second param change. video
if (value === "true" || value === "false") {
newValue = value === "true" ? true : false;
}
if (newValue === true && (name === "DU_DT" || name === "SINF")) {
if (name === "DU_DT") {
result = { ...values, DU_DT: true, SINF: false };
} else {
result = { ...values, DU_DT: false, SINF: true };
}
} else {
result = { ...values, [name]: newValue }
}
dispatch({
type: ConfigurationActions.SET_VALUES,
payload: result,
});

UnhandledPromiseRejectionWarning: TypeError: Cannot read property parameter of undefined

So what I'm trying to do is create a class method that compares two objects and returns custom data depending on the results. To get this custom data, I have destructured parameters that should let me customize what kind of data it returns. Here's the code so far for reference:
objects(obj1, obj2, { keysAndValues = true, returnSimplified = false, returnDetailed = false, keysOnly = false, valuesOnly = false }) {
try {
var results = [];
if (keysOnly == true) {
if (valuesOnly == true || keysAndValues == true) {
throw new SyntaxError('Two conflicting arguments cannot be chosen.');
}
Object.keys(obj1).forEach(o1 => Object.keys(obj2).forEach(o2 => {
if (o1 == o2) results.push(o1);
}));
} else if (valuesOnly == true) {
if (keysOnly == true || keysAndValues == true) {
throw new SyntaxError('Two conflicting arguments cannot be chosen.');
}
Object.values(obj1).forEach(o1 => Object.values(obj2).forEach(o2 => {
if (o1 == o2) results.push(o1);
}));
} else if (keysAndValues == true) {
if (valuesOnly == true || keysOnly == true) throw new SyntaxError('Two conflicting arguments cannot be chosen.');
results.push('Keys: ')
Object.keys(obj1).forEach(o1 => Object.keys(obj2).forEach(o2 => {
if (o1 == o2) results.push(o1);
}));
results.push('Values: ')
Object.values(obj1).forEach(o1 => Object.values(obj2).forEach(o2 => {
if (o1 == o2) results.push(o1);
}));
} else if (returnSimplified == true && returnDetailed == true) throw new SyntaxError('Two conflicting arguments cannot be chosen.');
var details = {
NumberOfMatchingResults: results.length,
ObjectName1: obj1,
ObjectName2: obj2,
ObjectKeys1: Object.keys(obj1),
ObjectKeys2: Object.keys(obj2),
ObjectValues1: Object.values(obj1),
ObjectValues2: Object.values(obj2)
};
return ((returnSimplified == true && !returnDetailed == true) ? results.length : (returnDetailed == true) ? details : results);
} catch (error) {
console.log(error.stack);
}
}
Now, it's not the prettiest piece of code out there, but for the most part, it gets the job done. The problem comes in when I try to call the method without one of the destructured parameters.
Example:
console.log(Compare.objects(obj1, obj2)); //returns 'Cannot read property "keysAndValues" of undefined'
I don't know what else to try, because nothing has worked so far, so I'm instead bringing the question here. Any help would be awesome.
The problem is that you need to set a default value for your destructured parameter itself. Just set its default value as an empty object to accomplish your desired outcome.
objects(obj1, obj2, {
keysAndValues = true,
returnSimplified = false,
returnDetailed = false,
keysOnly = false,
valuesOnly = false } = {}
) {
// method code here
}
You can clean up your method further by eliminating equality operators when checking for truthy or falsey values. if (valuesOnly) is preferred over if (valuesOnly == true).
Also, when comparing non-boolean values, you should always use strict equality operators to avoid bugs. So (o1 == o2) should be (o1 === o2)
Define your third parameter like this:
objects(obj1, obj2, booleans = {}) {
const {
keysAndValues = true, // default value
returnSimplified = false, // default value
returnDetailed = false, // default value
keysOnly = false, // default value
valuesOnly = false, // default value
} = booleans;
..... // block of code
}
at the time of calling the method do this:
// without third param
Compare.objects(obj1, obj2)
// with third param
Compare.objects(obj1, obj2, {
keysAndValues : true, // or false
returnSimplified : false, // or true
returnDetailed : false, // or true
keysOnly : false, // or true
valuesOnly : false, // or true
});

update object properties from inside function

I'm trying to update the values in validations inside of the function it sets isValid to false however it doesn't update validations outside of the function, how can i do this?
export let validations = {
validate: null,
isValid: true,
validationMessage: ''
};
function validateInput(value) {
if (value == null || value.length === 0) {
const update = {...validations, isValid: false}
{console.log(bla)}
return update
}
Have you tried:
export let validations = {
validate: null,
isValid: true,
validationMessage: ''
};
function validateInput(value) {
if (value == null || value.length === 0) {
validations.isValid = false
}
}
Is it that you want the actual validations object to be intact and your validateInput function should return it's validation result
export let validations = {
validate: null,
isValid: true,
validationMessage: ''
};
function validateInput(value) {
const update = {...validations};
if (value == null || value.length === 0) {
update.isValid = false;
}
return update;
}
or something like
export let validations = {
validate: function(value){
if (value == null || value.length === 0) {
this.isValid = false;
this.validationMessage = 'No value'
}},
reset: function(){
this.isValid = true;
this.validationMessage = '';
},
isValid: true,
validationMessage: ''
};

How to check if boolean is true in custom validation simple-schema in Meteor

I have the following Schema:
Games.attachSchema(new SimpleSchema({
title: {
type: String,
label: "Title",
max: 30
},
multiplayer: {
type: Boolean,
label: "Multiplayer",
denyUpdate: true
},
description: {
type: String,
label: "Description",
custom: function() {
var multiplayer = this.field("multiplayer");
if (multiplayer.isSet && multiplayer.value && !this.isSet) return "Description is empty!";
return true;
}
}
}));
My goal is to check if description is empty, but only if the checkbox multiplayer has been checked. If the checkbox has not been checked, the description should not be mandatory to fill in.
I tried the code above, but it does not validate. Even if I do not have an description and I checked the checkbox, I am able to submit the form.
I found the proper documentation and I solved it like this:
{
description: {
type: String,
optional: true,
custom: function () {
var shouldBeRequired = this.field('multiplayer').value;
if (shouldBeRequired) {
// inserts
if (!this.operator) {
if (!this.isSet || this.value === null || this.value === "") return "required";
}
// updates
else if (this.isSet) {
if (this.operator === "$set" && this.value === null || this.value === "") return "required";
if (this.operator === "$unset") return "required";
if (this.operator === "$rename") return "required";
}
}
}
}
}
I think the problem is with your validation logic. Try changing it to :
if (multiplayer.isSet && multiplayer.value && this.isSet && this.value == "")
return "Description is empty!";

Categories