Vue.js Element UI form validation - display errors from backend - javascript

i'm using Vue.js and Element Ui libraries for my project. I have front-end based validation with some rules. But i also need to implement display errors (for current field) from backend. When the form is sent and backend returns error it looks like this:
[
{"message": "email address is invalid", "path": ["email"]},
{"message": "example error for password field", "path": ["password"]}
]
where path is field name based on my form field model.
I created some extra element that displays error from backend as you can see in my fiddle. But i would like to use vue element ui validation. So backend errors should be displayed the same way as front-end messages. I can't figure out how to do this.
Here is my fiddle: https://jsfiddle.net/ts4Lfxb6/
Form code looks like this:
<el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="top">
<el-form-item label="Email" prop="email">
<el-input v-model="loginForm.email" :disabled="formProcessing" ref="loginInput"></el-input>
<p v-if="isErrorForField('email', errors)">{{ getErrorForField('email', errors) }}</p>
</el-form-item>
<el-form-item label="Password" prop="password">
<el-input v-model="loginForm.password" :disabled="formProcessing" type="password"></el-input>
<p v-if="isErrorForField('password', errors)">{{ getErrorForField('password', errors) }}</p>
</el-form-item>
<el-form-item>
<div class="submit-wrapper">
<el-button type="primary" #click="submit('loginForm')" :loading="formProcessing">Log in</el-button>
</div>
</el-form-item>
</el-form>
And Full component is here:
var Main = {
data() {
return {
loginForm: {
email: '',
password: ''
},
rules: {
email: { required: true, message: 'Required', trigger: 'change' },
password: { required: true, message: 'Required', trigger: 'change' }
},
formProcessing: false,
errors: []
}
},
methods: {
isErrorForField (field, errors) {
if (!errors && !errors.length) {
return false
}
let filtered = errors.filter(error => {
return error.path[0] === field
})
if (filtered.length) {
return filtered
}
},
getErrorForField (field, errors) {
if (!errors && !errors.length) {
return false
}
let filtered = errors.filter(error => {
return error.path[0] === field
})
if (filtered.length) {
return filtered[0].message
}
},
supportGlobalErrorMessage () {
this.errors.forEach(error => {
if (!error.path.length) {
this.$message({
message: error.message,
type: 'error'
})
}
})
},
submit (formName) {
this.$refs[formName].validate(valid => {
if (!valid) {
return false
}
this.formProcessing = true
// send data to backend
// error response looks like this:
let errors = [
{"message": "email address is invalid", "path": ["email"]},
{"message": "example error for password field", "path": ["password"]}
]
setTimeout(() => {
this.formProcessing = false
this.errors = errors
this.supportGlobalErrorMessage()
}, 500)
})
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
Can someone help?

Made the following changes to your code:
var Main = {
data() {
return {
loginForm: {
email: '',
password: ''
},
rules: {
email: {
required: true,
//validator: this.customValidator,
//trigger: 'blur'
},
password: {
required: true,
//validator: this.customValidator,
//trigger: 'blur'
}
},
formProcessing: false,
errors: []
}
},
methods: {
customValidator(rule, value, callback) {
console.log(rule)
if (!value) {
callback(new Error('The field is required'))
}
let errors = [{
"message": "email address is invalid",
"path": ["email"]
},
{
"message": "example error for password field",
"path": ["password"]
}
]
setTimeout(() => {
this.errors = errors
if (this.isErrorForField(rule.fullField, this.errors)) {
callback(new Error(this.getErrorForField(rule.fullField, this.errors)))
}
callback()
}, 500)
},
isErrorForField(field, errors) {
if (!errors && !errors.length) {
return false
}
let filtered = errors.filter(error => {
return error.path[0] === field
})
if (filtered.length) {
return filtered
}
},
getErrorForField(field, errors) {
if (!errors && !errors.length) {
return false
}
let filtered = errors.filter(error => {
return error.path[0] === field
})
if (filtered.length) {
return filtered[0].message
}
},
supportGlobalErrorMessage() {
this.errors.forEach(error => {
if (!error.path.length) {
this.$message({
message: error.message,
type: 'error'
})
}
})
},
submit(formName) {
this.$refs[formName].validate(valid => {
if (!valid) {
return false
}
this.formProcessing = true
// send data to backend
// error response looks like this:
let errors = [{
"message": "email address is invalid",
"path": ["email"]
},
{
"message": "example error for password field",
"path": ["password"]
}
]
setTimeout(() => {
this.errors = errors
this.formProcessing = false
this.supportGlobalErrorMessage()
}, 500)
})
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
#import url("//unpkg.com/element-ui#2.0.5/lib/theme-chalk/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui#2.0.5/lib/index.js"></script>
<div id="app">
<el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="top">
<el-form-item label="Email" prop="email" :error="getErrorForField('email', errors)">
<el-input v-model="loginForm.email" :disabled="formProcessing" ref="loginInput"></el-input>
<!-- <p v-if="isErrorForField('email', errors)">{{ getErrorForField('email', errors) }}</p> -->
</el-form-item>
<el-form-item label="Password" prop="password" :error="getErrorForField('password', errors)">
<el-input v-model="loginForm.password" :disabled="formProcessing" type="password"></el-input>
<!-- <p v-if="isErrorForField('password', errors)">{{ getErrorForField('password', errors) }}</p> -->
</el-form-item>
<el-form-item>
<div class="submit-wrapper">
<el-button type="primary" #click="submit('loginForm')" :loading="formProcessing">Log in</el-button>
</div>
</el-form-item>
</el-form>
</div>
The validator property in the rules attribute can set a custom validation rule which receive three parameters (rule, value, callback).
rule: The validation rule in the source descriptor that corresponds to the field name being validated. It is always assigned a field property with the name of the field being validated.
value: The value of the source object property being validated.
callback: A callback function to invoke once validation is complete. It expects to be passed an array of Error instances to indicate validation failure. If the check is synchronous, you can directly return a false or Error or Error Array.
So, you can get the data from the backend and process it, and then display the error message through the callback.

Related

Cross Field Validation

Hoping I've provided enough info : Using the below links is anyone able to reproduce making Cross Field Validation form into one field that has a customer Your code must be 4 digits. & no error once 4 digit pin is entered (only any 4 numbers eg.(1234),(0000),(9999) (not any other characters))
https://codesandbox.io/s/s023f
https://vee-validate.logaretm.com/v3/advanced/rules-object-expression.html#cross-field-validation
Below is my Attempt with import { extend } from "vee-validate"; example using regex /^\d{4}$/ on equalFourDigits but I'm still seeing the custom message when 4 numbers are entered - I want to keep the custom message.
<script>
import { extend } from "vee-validate";
extend("equalFourDigits", {
params: ["equalFourDigits"],
validate: ({ equalFourDigits }) => {
if ( equalFourDigits === /^\d{4}$/ ) {
return true;
}
return false;
},
message:
"Your code must be 4 digits. {equalFourDigits}"
});
export default {
data: () => ({
firstValue: '',
secondValue: '',
equalFourDigits: ''
})
};
</script>
<template>
<ValidationObserver>
<ValidationProvider :rules="{ required: true, numeric: 4, equalFourDigits: { equalFourDigits:
equalFourDigits }}" v-slot="{ errors }">
<input type="text" v-model.number="secondValue">
<span>{{ errors[0] }}</span>
</ValidationProvider>
</ValidationObserver>
</template>
maybe you can just use :rules="{required: true, digits:4}" instead?
import {digits} from 'vee-validate/dist/rules';
extend('digits', {
...digits,
message: `only four digits ...!!!!`,
})
or
extend("equalFourDigits", {
validate: (value) => {
const regex = new RegExp(/^\d{4}$/)
if (regex.test(value)) {
return true;
}
return `Your code must be 4 digits. ${value}`;
},
});

$refs resetFields not a function AntDesign

I have a problem with reseting fields of my form.
I have a form. The user can adding another forms and another ...
If everything is OK, I would like to recording data in my DB and in my store AND reset all of inputs of my form. This is this last point I cannot do.
I have tried different solutions but It does not work.
This is my code :
<div v-for="(question, index) in questionsSignaletiques" :key="index" class="blockQuestion" >
<!--form to add questions : one form per question, each form have a different name in the ref -->
<a-form-model
layout="inline"
:ref="'p' + index"
>
<p>New question</p>
<a-alert v-if="question.error.here" type="error" :message="question.error.message" show-icon />
<a-form-model-item>
<a-input v-model="question.question.type" placeholder="Title">
</a-input>
</a-form-model-item>
<a-form-model-item>
<a-input v-model="question.question.item" placeholder="Item">
</a-input>
</a-form-model-item>
<br><br>
<a-form-model-item label="Question multiple" prop="delivery">
<a-switch v-model="question.question.multiple" />
</a-form-model-item>
<a-form-model-item label="Obligatoire" prop="delivery">
<a-switch v-model="question.question.obligatoire" />
</a-form-model-item>
<br><br>
<div class="blockChoices">
<div v-for="subrow in question.question.choices">
<a-form-model-item>
<a-input v-model="subrow.name" placeholder="Choix">
</a-input>
</a-form-model-item>
</div>
</div>
<a-button #click="addChoice(question)" type="secondary">Add a choice</a-button>
</a-form-model>
</div>
<div>
<a-button #click="addItem" type="secondary">Add a question</a-button>
</div>
<br>
<div>
<a-button #click="submit" type="primary">Send</a-button>
</div>
Javascript code :
data() {
return {
idStudy: this.$route.params.id,
aucuneQuestion:false,
questionsSignaletiques: [
{
"study":"/api/studies/" + this.$route.params.id,
"question":
{
type: "",
item: "",
multiple: false,
obligatoire: false,
inverse: false,
barometre: false,
originale: false,
signaletik: true,
choices: [{name:''}]
},
"error": {
message:"",
here:false
}
}
],
}
},
mounted() {
//retreive all the questions still recorded
axios
.get('http://127.0.0.1:8000/api/studies/' + this.idStudy + '/question_studies?question.signaletik=true')
.then((result)=>{
console.log(result.data["hydra:member"])
this.aucuneQuestion = result.data["hydra:member"].length === 0;
//on met les données dans le store
this.$store.commit("setListeQuestionsSignaletiques", result.data["hydra:member"])
})
.catch(err=>console.log(err))
},
methods: {
//Adding a question
addItem () {
this.questionsSignaletiques.push(
{
"study":"/api/studies/" + this.idStudy,
"question":
{
type: "",
item: "",
multiple: false,
obligatoire: false,
inverse: false,
barometre: false,
originale: false,
signaletik: true,
choices: [{name:''}]
},
"error": {
message:"",
here:false
}
}
)
},
//adding a choice
addChoice: function(choice) {
choice.question.choices.push({
name: ''
})
},
// Sending the forms
submit () {
//loop table to retrieve all questions and indexes if the user adding several questions
this.questionsSignaletiques.forEach((element,index) =>
{
const inputType = element.question.type
const inputItem = element.question.item
const inputChoice = element.question.choices
//loop on choices to see if empty one or not
for (const oneChoice of inputChoice)
{
if ((inputChoice.length == 1) ||(inputChoice.length == 2 && oneChoice.name == ""))
{
element.error.here=true
element.error.message = "You must have two choices at least"
return false; // stop here if error
}
else
{}
}// end loop of choices
// verify other fields
if (inputType == "" || inputItem =="")
{
element.error.here=true
element.error.message = "Title and item must not be empty"
}
else
{
// everything is ok we can record in db and store
//reset fields == does not work
this.$refs['p' + index][0].fields.resetField()
//this.$refs['p' + index][0].resetFields();
// adding questions in db one by one
/*
axios
.post('http://127.0.0.1:8000/api/question_studies', element)
.then((result)=>{
console.log(result)
//add in the state
this.$store.commit("addQuestionSignaletique", element)
})
.catch(error => {
console.log("ERRRR:: ",error);
});
*/
}
}) //end loop foreach
}
}
};
Thanks a lot for help
EDIT AFTER THE FIRST ANSWER
Ok I didn't know. So I changed my mind : I added a "show" in my "data" which is true at the beginning. If everything is ok, I save the question and set the show to false.
The problem now is that when I have a question that is OK and the other one that is not. When I correct the question that was not ok and save it, BOTH questions go into the STATE. So there is a duplicate in my state AND my DB... What can I do? This is the code :
I just added this in the HTML :
<div v-for="(question, index) in questionsSignaletiques" :key="index" >
<a-form-model
layout="inline"
v-if="question.show"
class="blockQuestion"
>
...
data() {
return {
idStudy: this.$route.params.id,
aucuneQuestion:false,
questionsSignaletiques: [
{
"study":"/api/studies/" + this.$route.params.id,
"question":
{
type: "",
item: "",
multiple: false,
obligatoire: false,
inverse: false,
barometre: false,
originale: false,
signaletik: true,
choices: [{name:''}]
},
"error": {
message:"",
here:false
},
"show":true,
}
],
}
},
mounted() {
//retrieve question still recorded
axios
.get('http://127.0.0.1:8000/api/studies/' + this.idStudy + '/question_studies?question.signaletik=true')
.then((result)=>{
console.log(result.data["hydra:member"])
this.aucuneQuestion = result.data["hydra:member"].length === 0;
this.$store.commit("setListeQuestionsSignaletiques", result.data["hydra:member"])
})
.catch(err=>console.log(err))
},
methods: {
//adding a question
addItem () {
this.questionsSignaletiques.push(
{
"study":"/api/studies/" + this.idStudy,
"question":
{
type: "",
item: "",
multiple: false,
obligatoire: false,
inverse: false,
barometre: false,
originale: false,
signaletik: true,
choices: [{name:''}]
},
"error": {
message:"",
here:false
},
"show":true
}
)
},
//adding a choice
addChoice: function(choice) {
choice.question.choices.push({
name: ''
})
},
// submit the form
submit () {
this.questionsSignaletiques.forEach((element,index) =>
{
const inputType = element.question.type
const inputItem = element.question.item
const inputChoice = element.question.choices
for (const oneChoice of inputChoice)
{
if ((inputChoice.length == 1) ||(inputChoice.length == 2 && oneChoice.name == ""))
{
element.error.here=true
element.error.message = "You must have two choices at least"
return false; //on s'arrête là si il y a une erreur
}
else
{
console.log("no problem")
}
}
if (inputType == "" || inputItem =="")
{
element.error.here=true
element.error.message = "You must fill type and item"
}
else
{
// hide the question form
element.show =false
//adding in db
axios
.post('http://127.0.0.1:8000/api/question_studies', element)
.then((result)=>{
//add in the state
this.$store.commit("addQuestionSignaletique", element)
})
.catch(error => {
console.log("ERRRR:: ",error);
});
}
}) //end loop foreach
}
}
};
Thanks for help !
form.reset() does not work when using v-model.
Reset the reactive data instead.
reset() {
this.question.question.type = ""
...
...
}

How to handel custom error message in nuxt js

What do you have ?
My frontend is made on Nuxt js and backend is made in node and graphql.
I have the following code snippet from my controller to generate relevant error message:
createUser: async function ({ userInput }, req) {
const errors = []
if (!validator.isEmail(userInput.email)) {
errors.push({ message: 'Email is invalid' })
}
//other custom error code
if (errors.length > 0) {
error = new Error('Invalid input')
error.data = errors;
error.code = 422;
throw error
}
//other code if no error
}
And my frontend code to reach the controller method from the page (register):
methods: {
async onSubmit(e) {
e.preventDefault()
const graphqlQuery = { //query code goes here}
const res = await this.$axios.post('http://localhost:8080/graphql', graphqlQuery, {
headers: {
'Content-Type': 'application/json'
}
})
if (res.status === 200) {
this.error.mode = true
this.error.title = 'Success ! '
this.error.message = 'Account created successfully. Please login'
this.error.type = 'success'
}
if (res.errors && res.errors[0].status === 422) {
this.error.mode = true
this.error.title = 'Verification failed ! '
this.error.message = res.errors[0].message
this.error.type = 'danger'
}
if (res.errors) {
this.error.mode = true
this.error.message = 'User creation failed ! '
this.error.type = 'danger'
}
}
}
And custom error page:
<template>
<b-container>
<b-row>
<b-col class="error-wrapper">
<h1 class="error-code">
{{ statusCode }}
</h1>
<h4>
{{ message }}
</h4>
<b-link to="/" class="btn to-home">
Home
</b-link>
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
name: 'ErrorVue',
layout: 'default',
props: {
error: {
type: Object,
default: null
}
},
computed: {
statusCode () {
return (this.error && this.error.statusCode) || 500
},
message () {
return this.error.message || 'Error'
}
}
}
</script>
<style scoped>
</style>
What are you trying to do ?
I'm trying to handle and display the custom error code with in the page, with the above error handling code.
What is the issue ?
When I intentionally pass wring data to cause error. I'm being redirected to error page with status 500.
I'm not able to console log error in the page(register) but able to log in the error.vue page.
The error does contain the custom code and message. And I want to display them in page from where the method was initiated(register).
How do I display the custom message in the register.vue page ? Or does anyone have alternative method to approach the issue ?

vue.js VeeValidate - custom validator correctly compiles errors but does not toggle error class

I've written a custom validator like this:
created () {
this.$validator.extend('validateCert', {
getMessage: (field) => {
return field + ' is not a valid certificate';
},
validate: (value) => {
return value.startsWith('-----BEGIN CERTIFICATE-----') && value.endsWith('-----END CERTIFICATE-----');
}
});
}
I've attached it to a text area inside a modal:
<div class="pb-3 mr-4">
<b-form-textarea
type="text"
v-validate="'required|validateCert'"
data-vv-validate-on="change"
v-model.trim="signedCerts[index]"
data-vv-scope="uploadCert"
:name="'certificate_' + index"
:class="[{'is-invalid': errors.has('certificate_' + index)}]"
rows="15"/>
<fr-validation-error :validatorErrors="errors" :fieldName="'certificate_' + index"></fr-validation-error>
</div>
Then - on button click I do the following:
uploadCerts (event) {
let idmInstance = this.getRequestService(),
body = {
fromCSR: true,
certs: _.each(this.signedCerts, (cert) => {
JSON.stringify(cert);
})
};
this.$validator.validateAll('uploadCert').then((valid) => {
// Prevent modal from closing
event.preventDefault();
if (valid) { // some more logic
If I inspect the computed errors object, I will see my failed validation:
{
"items": [
{
"id": "19",
"field": "certificate_0",
"msg": "certificate_0 is not a valid certificate",
"rule": "validateCert",
"scope": "uploadCert",
"regenerate": {
"_custom": {
"type": "function",
"display": "<span>ƒ</span> regenerate()"
}
}
}
]
}
and the value of 'valid' (either true or false) is accurate at all times. I'm just not seeing my error classes being triggered.
Hard to completely answer the question because part of it depends on what happens in fr-validation-error, but I think the problem is how you're using scopes.
When you define data-vv-scope="uploadCert" that means that every reference to field-name has to be prefaced by uploadCert. in errors. So when you specify in your :class that errors.has('certificates_'+index), you have to change that to errors.has('uploadCert.certificates_'+index).
Here's how it would look in full (minus the bootstrap-vue and multiple fields bits):
<textarea
v-validate="'required|validateCert'"
data-vv-validate-on="change"
data-vv-scope="uploadCert"
v-model.trim="signedCert"
name="certificate"
class="form-control"
:class="{ 'is-invalid': errors.has('uploadCert.certificate') }"
rows="10"
>
</textarea>
Full working example for one certificate upload field: https://codesandbox.io/s/z2owy0r2z3

Validation error in Keystone JS

I am trying to build a contact form which is very similar to the one used in the keystone demo but i have hit a road block, While trying to save to db, I get the following errors
{ message: 'Validation failed',
name: 'ValidationError',
errors:
{ name:
{ name: 'ValidatorError',
path: 'name',
message: 'Name is required',
type: 'required' } } }
I have checked the fields on the form and also the request in the backend by doing a console.log but for some reason i still keep on getting the same error.
Here is what I have in my jade file
section#contact-container
section#contact.contact-us
.container
.section-header
// SECTION TITLE
h2.white-text Get in touch
// SHORT DESCRIPTION ABOUT THE SECTION
h6.white-text
| Have any question? Drop us a message. We will get back to you in 24 hours.
if enquirySubmitted
.row
h3.white-text.wow.fadeInLeft.animated(data-wow-offset='30', data-wow-duration='1.5s', data-wow-delay='0.15s') Thanks for getting in touch.
else
.row
form#contact.contact-form(method="post")
input(type='hidden', name='action', value='contact')
.wow.fadeInLeft.animated(data-wow-offset='30', data-wow-duration='1.5s', data-wow-delay='0.15s')
.col-lg-4.col-sm-4(class=validationErrors.name ? 'has-error' : null)
input.form-control.input-box(type='text', name='name', value=formData.name, placeholder='Your Name')
.col-lg-4.col-sm-4
input.form-control.input-box(type='email', name='email', value=formData.email, placeholder='Your Email')
.col-lg-4.col-sm-4
div(class=validationErrors.enquiryType ? 'has-error' : null)
input.form-control.input-box(type='text', name='enquiryType', placeholder='Subject', value=formData.enquiryType)
.col-md-12(class=validationErrors.message ? 'has-error' : null)
.col-md-12.wow.fadeInRight.animated(data-wow-offset='30', data-wow-duration='1.5s', data-wow-delay='0.15s')
textarea.form-control.textarea-box(name='message', placeholder='Your Message')= formData.message
button.btn.btn-primary.custom-button.red-btn.wow.fadeInLeft.animated(data-wow-offset='30', data-wow-duration='1.5s', data-wow-delay='0.15s', type='submit') Send Message
and this is how my schema and route file looks like
var keystone = require('keystone'),
Types = keystone.Field.Types;
var Enquiry = new keystone.List('Enquiry', {
nocreate: true,
noedit: true
});
Enquiry.add({
name: { type: Types.Name, required: true },
email: { type: Types.Email, required: true },
enquiryType: { type: String },
message: { type: Types.Markdown, required: true },
createdAt: { type: Date, default: Date.now }
});
Enquiry.schema.pre('save', function(next) {
this.wasNew = this.isNew;
next();
});
Enquiry.schema.post('save', function() {
if (this.wasNew) {
this.sendNotificationEmail();
}
});
Enquiry.schema.methods.sendNotificationEmail = function(callback) {
var enqiury = this;
keystone.list('User').model.find().where('isAdmin', true).exec(function(err, admins) {
if (err) return callback(err);
new keystone.Email('enquiry-notification').send({
to: admins,
from: {
name: 'Wheatcroft Accounting',
email: 'contact#abc.com'
},
subject: 'New Enquiry for **',
enquiry: enqiury
}, callback);
});
};
Enquiry.defaultSort = '-createdAt';
Enquiry.defaultColumns = 'name, email, enquiryType, createdAt';
Enquiry.register();
This is the route file
var keystone = require('keystone'),
async = require('async'),
Enquiry = keystone.list('Enquiry');
exports = module.exports = function(req, res) {
var view = new keystone.View(req, res),
locals = res.locals;
locals.section = 'contact';
locals.formData = req.body || {};
locals.validationErrors = {};
locals.enquirySubmitted = false;
view.on('post', { action: 'contact' }, function(next) {
var newEnquiry = new Enquiry.model();
var updater = newEnquiry.getUpdateHandler(req);
updater.process(req.body, {
flashErrors: true,
fields: 'name, email, enquiryType, message',
errorMessage: 'There was a problem submitting your enquiry:'
}, function(err) {
if (err) {
locals.validationErrors = err.errors;
console.log(err);
} else {
locals.enquirySubmitted = true;
}
next();
});
});
view.render('contact');
}
I believe the problem has to do with the way KeystoneJS handles Types.Name field types internally.
In your jade file, you should reference your name field using a path to its virtual name.full property. Internally name.full has a setter that splits the name into name.first and name.last. So, if you wish to have separate input for the first and last name you should use name.first and name.last. If you want a single input to enter the full name you should use name.full.
Try replacing the input control for your name field:
input.form-control.input-box(type='text', name='name', value=formData.name, placeholder='Your Name')
with this:
input.form-control.input-box(type='text', name='name.full', value=formData['name.full'])

Categories