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.

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