Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/spatie/form-backend-validation
An easy way to validate forms using back end logic
https://github.com/spatie/form-backend-validation
form javascript validation vue
Last synced: about 2 months ago
JSON representation
An easy way to validate forms using back end logic
- Host: GitHub
- URL: https://github.com/spatie/form-backend-validation
- Owner: spatie
- License: mit
- Archived: true
- Created: 2016-12-26T20:21:47.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-03-21T12:58:53.000Z (over 2 years ago)
- Last Synced: 2024-07-23T11:56:36.980Z (about 2 months ago)
- Topics: form, javascript, validation, vue
- Language: JavaScript
- Homepage: https://spatie.be/opensource/javascript
- Size: 126 KB
- Stars: 793
- Watchers: 13
- Forks: 51
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-starred - spatie/form-backend-validation - An easy way to validate forms using back end logic (javascript)
README
[
](https://supportukrainenow.org)
# An easy way to validate forms using back end logic
[](https://npmjs.com/package/form-backend-validation)
[](LICENSE.md)
[](https://travis-ci.org/spatie/form-backend-validation)
[](https://npmjs.com/package/form-backend-validation)
Wouldn't it be great if you could just use your back end to validate forms on the front end? This package provides a `Form` class that does exactly that. It can post itself to a configured endpoint and manage errors. The class is meant to be used with a Laravel back end.
Take a look at the [usage section](#usage) to view a detailed example on how to use it.
The code of this package is based on the [Object-Oriented Forms lesson](https://laracasts.com/series/learn-vue-2-step-by-step/episodes/19) in the [Vue 2.0 series](https://laracasts.com/series/learn-vue-2-step-by-step/) on [Laracasts](https://laracasts.com/).
## Support us
[
](https://spatie.be/github-ad-click/form-backend-validation)
We invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us).
We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on [our contact page](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards).
## Install
You can install the package via yarn (or npm):
```bash
yarn add form-backend-validation
```
By default, this package expects `axios` to be installed (unless you're using your own http library, see the [Options](#options) section for that).
```bash
yarn add axios
```
## Usage
You can find an example implementation with Laravel and Vue in the [spatie/form-backend-validation-example-app repo](https://github.com/spatie/form-backend-validation-example-app).
```js
import Form from 'form-backend-validation';
// Instantiate a form class with some values
const form = new Form({
field1: 'value 1',
field2: 'value 2',
person: {
first_name: 'John',
last_name: 'Doe',
},
});
// A form can also be initiated with an array
const form = new Form(['field1', 'field2']);
// Submit the form, you can also use `.put`, `.patch` and `.delete`
form.post(anUrl)
.then(response => ...)
.catch(response => ...);
// Returns true if request is being executed
form.processing;
// If there were any validation errors, you easily access them
// Example error response (json)
{
"errors": {
"field1": ['Value is required'],
"field2": ['Value is required']
}
}
// Returns an object in which the keys are the field names
// and the values array with error message sent by the server
form.errors.all();
// Returns true if there were any error
form.errors.any();
// Returns object with errors for the specified keys in array.
form.errors.any(keys);
// Returns true if there is an error for the given field name or object
form.errors.has(key);
// Returns the first error for the given field name
form.errors.first(key);
// Returns an array with errors for the given field name
form.errors.get(key);
// Shortcut for getting the first error for the given field name
form.getError(key);
// Clear all errors
form.errors.clear();
// Clear the error of the given field name or all errors on the given object
form.errors.clear(key);
// Returns an object containing fields based on the given array of field names
form.only(keys);
// Reset the values of the form to those passed to the constructor
form.reset();
// Set the values which should be used when calling reset()
form.setInitialValues();
// Populate a form after its instantiation, the populated fields will override the initial fields
// Fields not present at instantiation will not be populated
const form = new Form({
field1: '',
field2: '',
});
form.populate({
field1: 'foo',
field2: 'bar',
});
```
### Options
The `Form` class accepts a second `options` parameter.
```js
const form = new Form({
field1: 'value 1',
field2: 'value 2',
}, {
resetOnSuccess: false,
});
```
You can also pass options via a `withOptions` method (this example uses the `create` factory method.
```
const form = Form.create()
.withOptions({ resetOnSuccess: false })
.withData({
field1: 'value 1',
field2: 'value 2',
});
```
#### `resetOnSuccess: bool`
Default: `true`. Set to `false` if you don't want the form to reset to its original values after a succesful submit.
#### `http: Object`
By default this library uses `axios` for http request. If you want, you can roll with your own http library (or your own axios instance).
*Advanced!* Pass a custom http library object. Your http library needs to adhere to the following interface for any http method you're using:
```ts
method(url: string, data: Object): Promise
```
Supported http methods are `get`, `delete`, `head`, `post`, `put` & `patch`.
If you want to see how the http library is used internally, refer to the `Form` class' `submit` method.
### Working with files
The form handles file inputs too. The data is then sent as `FormData`, which means it's encoded as `multipart/form-data`.
Some frameworks (like Laravel, Symfony) can't handle these incoming requests through other methods than `POST`, so you might need to take measures to work around this limitation. In Laravel or Symfony, that would mean adding a hidden `_method` field to your form containing the desired HTTP verb.
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
## Testing
``` bash
$ npm run test
```
## Contributing
Please see [CONTRIBUTING](https://github.com/spatie/.github/blob/main/CONTRIBUTING.md) for details.
## Security
If you discover any security related issues, please contact [Freek Van der Herten](https://github.com/freekmurze) instead of using the issue tracker.
## Postcardware
You're free to use this package, but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using.
Our address is: Spatie, Kruikstraat 22, 2018 Antwerp, Belgium.
We publish all received postcards [on our company website](https://spatie.be/en/opensource/postcards).
## Credits
- [Freek Van der Herten](https://github.com/freekmurze)
- [Sebastian De Deyne](https://github.com/sebastiandedeyne)
- [All Contributors](../../contributors)
Initial code of this package was copied from [Jeffrey Way](https://twitter.com/jeffrey_way)'s [Vue-Forms repo](https://github.com/laracasts/Vue-Forms/).
The idea to go about this way of validating forms comes from [Laravel Spark](https://spark.laravel.com/).
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.