Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vue Form and Error validator (Laracasts)

Add Object Oriented Forms to your JavaScript apps:

// Create a Form instance
const form = new Form({
    name: '',
    description: ''
});

// Submit a form
form.post('/endpoint')
    .then(response => alert('done!'))
    .catch(e => alert('error'));

// Reset the form data
form.reset();

// Get data
form.data();

// Get errors
erros = form.errors;

// Get error by key-name
form.errors.get('key');

// Record errors
let errors = {};
form.errors.record(errors);

// Clear
form.errors.clear();

// Check if has errors
form.errors.any();

To learn more about, visit Laracasts:

You can find the original source code here: https://github.com/laracasts/Vue-Forms/blob/master/public/js/app.js

class Errors {
/**
* Create a new Errors instance.
*/
constructor() {
this.errors = {};
}
/**
* Determine if an errors exists for the given field.
*
* @param {string} field
*/
has(field) {
return this.errors.hasOwnProperty(field);
}
/**
* Determine if we have any errors.
*/
any() {
return Object.keys(this.errors).length > 0;
}
/**
* Retrieve the error message for a field.
*
* @param {string} field
*/
get(field) {
if (this.errors[field]) {
return this.errors[field][0];
}
}
/**
* Record the new errors.
*
* @param {object} errors
*/
record(errors) {
this.errors = errors;
}
/**
* Clear one or all error fields.
*
* @param {string|null} field
*/
clear(field) {
if (field) {
delete this.errors[field];
return;
}
this.errors = {};
}
}
new Vue({
el: '#app',
data: {
form: new Form({
name: '',
description: ''
})
},
methods: {
onSubmit() {
this.form.post('/projects')
.then(response => alert('Wahoo!'));
}
}
});
class Form {
/**
* Create a new Form instance.
*
* @param {object} data
*/
constructor(data) {
this.originalData = data;
for (let field in data) {
this[field] = data[field];
}
this.errors = new Errors();
}
/**
* Fetch all relevant data for the form.
*/
data() {
let data = {};
for (let property in this.originalData) {
data[property] = this[property];
}
return data;
}
/**
* Reset the form fields.
*/
reset() {
for (let field in this.originalData) {
this[field] = '';
}
this.errors.clear();
}
/**
* Send a POST request to the given URL.
* .
* @param {string} url
*/
post(url) {
return this.submit('post', url);
}
/**
* Send a PUT request to the given URL.
* .
* @param {string} url
*/
put(url) {
return this.submit('put', url);
}
/**
* Send a PATCH request to the given URL.
* .
* @param {string} url
*/
patch(url) {
return this.submit('patch', url);
}
/**
* Send a DELETE request to the given URL.
* .
* @param {string} url
*/
delete(url) {
return this.submit('delete', url);
}
/**
* Submit the form.
*
* @param {string} requestType
* @param {string} url
*/
submit(requestType, url) {
return new Promise((resolve, reject) => {
axios[requestType](url, this.data())
.then(response => {
this.onSuccess(response.data);
resolve(response.data);
})
.catch(error => {
this.onFail(error.response.data);
reject(error.response.data);
});
});
}
/**
* Handle a successful form submission.
*
* @param {object} data
*/
onSuccess(data) {
alert(data.message); // temporary
this.reset();
}
/**
* Handle a failed form submission.
*
* @param {object} errors
*/
onFail(errors) {
this.errors.record(errors);
}
}
@ecmattos

This comment has been minimized.

Copy link

ecmattos commented Sep 11, 2018

Hi !
Im receiving this below error:
http://eslint.org/docs/rules/guard-for-in The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype
src/pages/auth/Login.vue:120:5
for (let field in data) {
^

http://eslint.org/docs/rules/guard-for-in The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype
src/pages/auth/Login.vue:132:5
for (let property in this.originalData) {
^

http://eslint.org/docs/rules/guard-for-in The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype
src/pages/auth/Login.vue:143:5
for (let field in this.originalData) {
^

✘ 3 problems (3 errors, 0 warnings)

Errors:
3 http://eslint.org/docs/rules/guard-for-in
@ ./src/router/paths.js 51:13-46
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

How do I fix ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.