Reputation: 420
I have a huge input form which is needed to be populated with data and be able to save progress, to finish the form later, BUT only when the form fits 1 custom rule only:
That means that is for example I have validations rules like this:
validations: {
A: {
required,
$each: {
Aa: { required },
Ab: { required, dontHaveForbiddenWords },
Ac: { required, dontHaveForbiddenWords }
},
},
B: {
required,
Ba: { required, dontHaveForbiddenWords },
Bb: { required },
}
// ... a lot of additional fields
}
In this case, I want the form to be able to be saved when all fields are empty(cos it DO NOT CONTAIN forbidden words) even if it has unfilled required fields.
The problem is that the form has an $invalid
state due to required
rule, and I have no idea how to bypass it.
Upvotes: 0
Views: 1654
Reputation: 420
this.$v.$touch()
and stays with a default value all the timeAs @EstusFlask suggest I've created a custom validator so I could turn it off in some cases, it uses a top-level variable instead of a parameter because I want to overrule this validator for all fields at once, also in my project I have conditional required validators
, and I found not create a better solution, would be glad if you will edit my solution:
import { helpers } from 'vuelidate/lib/validators';
let isRequired = true;
const customRequiredValidator = (value) => {
return isRequired ? helpers.req(value) : true;
}
later in code, I have 2 handlers:
required
rule OFFrequired
rule back ONsmth like this
onSave() {
isRequired = false;
if (this.$v.$invalid) {
isRequired = true;
// show alert
return;
}
isRequired = true;
// save form progress
}
// isRequired is always true after onSave
onSubmit() {
this.$v.$touch(); // to trigger the validation
if (this.$v.$invalid) return; // show alert
// sumbit the form
}
Upvotes: 1
Reputation: 420
My team mate it to stringify validationState
, and test it on a regex string that contains name of our validationRule, which in my case is dontHaveForbiddenWords
, and check for a false
value, that means that at least 1 rule is failed on entire form:
hasForbiddenCharacters() {
const validationStateString = JSON.stringify(this.$v.currentOffer, null, 0)
const hasForbiddenCharacters = /\"dontHaveForbiddenWords\":false/.test(validationStateString)
return hasForbiddenCharacters;
}
Upvotes: 0