How to use the mobx-react-form/lib/validators/VJF function in mobx-react-form
To help you get started, we’ve selected a few mobx-react-form examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
Emurgo / yoroi-frontend / app / components / wallet / send / WalletSendForm.js View on Github 
this.props.updateAmount();
}
return [isValidAmount, this.context.intl.formatMessage(messages.invalidAmount)];
}],
},
},
}, {
options: {
// if fields are pre-populated by URI, validate them right away
showErrorsOnInit: this.props.uriParams,
validateOnBlur: false,
validateOnChange: true,
validationDebounceWait: config.forms.FORM_VALIDATION_DEBOUNCE_WAIT,
},
plugins: {
vjf: vjf()
},
});
render() {
const { form } = this;
const { intl } = this.context;
const {
currencyUnit,
currencyMaxIntegerDigits,
currencyMaxFractionalDigits,
hasAnyPending,
classicTheme,
} = this.props;
const amountField = form.$('amount');value: '',
validators: [({ field }) => {
if (field.value === '') {
return [false, this.context.intl.formatMessage(globalMessages.fieldIsRequired)];
}
return [true];
}],
},
}
}, {
options: {
validateOnChange: true,
validationDebounceWait: config.forms.FORM_VALIDATION_DEBOUNCE_WAIT,
},
plugins: {
vjf: vjf()
},
});
submit() {
this.form.submit({
onSuccess: (form) => {
const { walletPassword } = form.values();
const transactionData = {
password: walletPassword,
};
this.props.onSubmit(transactionData);
},
onError: () => {}
});
}const walletPassword = form.$('walletPassword').value;
if (walletPassword.length === 0) return [true];
return [
isValidRepeatPassword(walletPassword, field.value),
this.context.intl.formatMessage(globalMessages.invalidRepeatPassword)
];
}],
},
},
}, {
options: {
validateOnChange: true,
validationDebounceWait: config.forms.FORM_VALIDATION_DEBOUNCE_WAIT,
},
plugins: {
vjf: vjf()
},
});
submit = () => {
this.form.submit({
onSuccess: (form) => {
const { recoveryPhrase, walletName, walletPassword, paperPassword } = form.values();
const walletData: WalletRestoreDialogValues = {
recoveryPhrase: join(recoveryPhrase, ' '),
walletName,
walletPassword,
paperPassword,
};
this.props.onSubmit(walletData);
},
onError: () => {}value: '',
validators: [({ field }) => (
[
isValidMemo(field.value),
this.context.intl.formatMessage(globalMessages.invalidMemo)
]
)],
},
}
}, {
options: {
validateOnChange: true,
validationDebounceWait: config.forms.FORM_VALIDATION_DEBOUNCE_WAIT,
},
plugins: {
vjf: vjf()
},
});
submit = () => {
this.form.submit({
onSuccess: (form) => {
this.setState({ isSubmitting: true });
const { memoContent } = form.values();
const memoData = {
memo: memoContent.replace(/ +/g, ' '),
tx: this.props.selectedTransaction.id,
lastUpdated: new Date()
};
this.props.onSubmit(memoData);
},
onError: () => {value: '',
validators: [({ field }) => {
if (field.value === '') {
return [false, this.context.intl.formatMessage(globalMessages.fieldIsRequired)];
}
return [true];
}],
},
}
}, {
options: {
validateOnChange: true,
validationDebounceWait: config.forms.FORM_VALIDATION_DEBOUNCE_WAIT,
},
plugins: {
vjf: vjf()
},
});
submit() {
this.form.submit({
onSuccess: (form) => {
const { walletPassword } = form.values();
const transactionData = {
password: walletPassword,
};
this.props.onSubmit(transactionData);
},
onError: () => {}
});
}const walletPassword = form.$('walletPassword').value;
if (walletPassword.length === 0) return [true];
return [
isValidRepeatPassword(walletPassword, field.value),
this.context.intl.formatMessage(globalMessages.invalidRepeatPassword)
];
}],
},
}
}, {
options: {
validateOnChange: true,
validationDebounceWait: config.forms.FORM_VALIDATION_DEBOUNCE_WAIT,
},
plugins: {
vjf: vjf()
},
});
submit = () => {
this.form.submit({
onSuccess: (form) => {
const { currentPassword, walletPassword } = form.values();
const passwordData = {
oldPassword: currentPassword || null,
newPassword: walletPassword,
};
this.props.onSave(passwordData);
},
onError: () => {},
});
};}
}
return [
this.props.mnemonicValidator(value),
this.context.intl.formatMessage(globalMessages.invalidRecoveryPhrase)
];
}],
},
},
}, {
options: {
validateOnChange: true,
validationDebounceWait: config.forms.FORM_VALIDATION_DEBOUNCE_WAIT,
},
plugins: {
vjf: vjf()
},
});
render() {
const { intl } = this.context;
const { form } = this;
const {
validWords,
mnemonicValidator,
mnemonicLength,
} = this.props;
this.props.setForm(this.form);
const { recoveryPhrase } = form.values();
const recoveryPhraseField = form.$('recoveryPhrase');return [
isValidAmount,
this.context.intl.formatMessage(messages.uriGenerateDialogInvalidAmount)
];
}],
},
},
}, {
options: {
showErrorsOnInit: false,
validateOnBlur: false,
validateOnChange: true,
validationDebounceWait: config.forms.FORM_VALIDATION_DEBOUNCE_WAIT,
},
plugins: {
vjf: vjf()
},
});
componentDidMount() {
const amountField = this.form.$('amount');
amountField.set(
'value',
this.props.amount != null ? this.props.amount.toString() : ''
);
}
render() {
const {
onClose,
onGenerate,
classicTheme,this.context.intl.formatMessage(globalMessages.fieldIsRequired)
]),
({ field }) => ([
this.lengthCheck(field.value),
this.context.intl.formatMessage(globalMessages.invalidPaperPassword)
]),
],
},
},
}, {
options: {
validateOnChange: true,
validationDebounceWait: config.forms.FORM_VALIDATION_DEBOUNCE_WAIT,
},
plugins: {
vjf: vjf()
},
});
render() {
const { form } = this;
const { intl } = this.context;
const {
paperPassword,
} = form.values();
this.props.setForm(this.form);
const paperPasswordField = form.$('paperPassword');
return (
<div>
{intl.formatMessage(globalMessages.passwordDisclaimer)}</div>value: defaultWalletName,
validators: [({ field }) => (
[
isValidWalletName(field.value),
intl.formatMessage(globalMessages.invalidWalletName)
]
)],
},
},
}, {
options: {
validateOnChange: true,
validationDebounceWait: config.forms.FORM_VALIDATION_DEBOUNCE_WAIT,
},
plugins: {
vjf: vjf()
},
});
}mobx-react-form
Automagically manage React forms state and automatic validation with MobX.
