form-backend-validation - npm Package Compare versions

Comparing version 0.0.4 to 1.0.0

CHANGELOG.md

 # Changelog
 
-All Notable changes to `vue-form-backend-validation` will be documented in this file
+All notable changes to `form-backend-validation` will be documented in this file
 
-## 1.0.0 - 201X-XX-XX
+## 1.0.0 - 2017-01-16
 - Initial release

CONTRIBUTING.md

@@ -5,3 +5,3 @@ # Contributing
 
-We accept contributions via Pull Requests on [Github](https://github.com/spatie/vue-form-backend-validation).
+We accept contributions via Pull Requests on [Github](https://github.com/spatie/form-backend-validation).
 
@@ -8,0 +8,0 @@ ## Pull Requests

dist/Errors.js

@@ -22,5 +22,5 @@ "use strict";
     /**
-     * Determine if an errors exists for the given field.
+     * Get all the errors.
      *
-     * @param {string} field
+     * @param {object} errors
      */
@@ -30,2 +30,14 @@
     _createClass(Errors, [{
+        key: "all",
+        value: function all() {
+            return this.errors;
+        }
+
+        /**
+         * Determine if an errors exists for the given field.
+         *
+         * @param {string} field
+         */
+
+    }, {
         key: "has",
@@ -32,0 +44,0 @@ value: function has(field) {

dist/Form.js

@@ -30,3 +30,11 @@ 'use strict';
 
+        if (Array.isArray(data)) {
+            data = data.reduce(function (carry, element) {
+                carry[element] = '';
+                return carry;
+            }, {});
+        }
+
         this.originalData = data;
+        this.errors = new _Errors2.default();
 
@@ -36,4 +44,2 @@ for (var field in data) {
         }
-
-        this.errors = new _Errors2.default();
     }
@@ -74,3 +80,3 @@
          * Send a POST request to the given URL.
-         * .
+         *
          * @param {string} url
@@ -87,3 +93,3 @@ */
          * Send a PUT request to the given URL.
-         * .
+         *
          * @param {string} url
@@ -100,3 +106,3 @@ */
          * Send a PATCH request to the given URL.
-         * .
+         *
          * @param {string} url
@@ -113,3 +119,3 @@ */
          * Send a DELETE request to the given URL.
-         * .
+         *
          * @param {string} url
@@ -136,2 +142,4 @@ */
 
+            this.validateRequestType(requestType);
+
             return new Promise(function (resolve, reject) {
@@ -145,3 +153,3 @@ _axios2.default[requestType](url, _this.data()).then(function (response) {
 
-                    reject(error.response.data);
+                    reject(error.response);
                 });
@@ -152,2 +160,18 @@ });
         /**
+         * Validate a request type.
+         * 
+         * @param {string} requestType
+         */
+
+    }, {
+        key: 'validateRequestType',
+        value: function validateRequestType(requestType) {
+            var requestTypes = ['get', 'delete', 'head', 'post', 'put', 'patch'];
+
+            if (requestTypes.indexOf(requestType) === -1) {
+                throw new Error('`' + requestType + '` is not a valid request type, ' + ('must be one of: `' + requestTypes.join('\`, \`') + '`.'));
+            }
+        }
+
+        /**
          * Handle a successful form submission.
@@ -154,0 +178,0 @@ *

package.json

 {
   "name": "form-backend-validation",
-  "version": "0.0.4",
+  "version": "1.0.0",
   "description": "An easy way to validate forms using back end logic",
@@ -20,6 +20,6 @@ "main": "dist/index.js",
     "vue",
+    "laravel",
     "form",
     "validation",
-    "server",
-    "laravel"
+    "server"
   ],
@@ -26,0 +26,0 @@ "author": "Freek Van der Herten",

README.md

@@ -1,11 +0,9 @@
-**THIS PACKAGE IS STILL IN DEVELOPMENT, DO NOT USE (YET)**
-
-
 # An easy way to validate forms using back end logic
 
-[![Latest Version on NPM](https://img.shields.io/npm/v/vue-form-backend-validation.svg?style=flat-square)](https://npmjs.com/package/vue-form-backend-validation)
+[![Latest Version on NPM](https://img.shields.io/npm/v/form-backend-validation.svg?style=flat-square)](https://npmjs.com/package/form-backend-validation)
 [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)
-[![Build Status](https://img.shields.io/travis/spatie/vue-form-backend-validation/master.svg?style=flat-square)](https://travis-ci.org/spatie/vue-form-backend-validation)
+[![Build Status](https://img.shields.io/travis/spatie/form-backend-validation/master.svg?style=flat-square)](https://travis-ci.org/spatie/form-backend-validation)
+[![npm](https://img.shields.io/npm/dt/form-backend-validation.svg?style=flat-square)]()
 
-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 does exactly that. It can post itself to a configured endpoint and manage errors. The class meant to be used in a `Vue` component and works out of the box with a Laravel back end.
+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 does exactly that. It can post itself to a configured endpoint and manage errors. The class meant to be used with a Laravel back end.
 
@@ -34,43 +32,36 @@ Take a look at the [usage section](#usage) to view a detailed example on how to use it.
 
-This is an example of a fully configured form that could be built up in a `Blade` view.
+You 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). 
 
-```html
-<form @submit.prevent="onSubmit" @keydown="form.errors.clear($event.target.name)">
-    <div>
-        <label for="name">Name:</label>
-        <input type="text" name="name" v-model="form.name"> 
-        <span v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
-    </div>
+![Screenshot](https://raw.githubusercontent.com/spatie/form-backend-validation-example-app/master/public/images/screenshot.png)
 
-    <div>
-        <label for="text">Text:</label>
-        <input type="text" name="text" v-model="form.text">
-       <span v-if="form.errors.has('text')" v-text="form.errors.get('text')"></span>
-    </div>
+```js
+import Form from 'form-backend-validation';
 
-    <div>
-        <button :disabled="form.errors.any()">Create news item</button>
-    </div>
-</form>
-```
+//instantiate a form class with some value
+const form = new Form({
+    field1: 'value 1',
+    field2: 'value 2',
+});
 
-This is an example of a `Vue` component that uses the provided `Form` class. 
+// a form can also be initiated with an array
+const form = new Form(['field1', 'field2']);
 
-```js
-new Vue({
-    el: '#app',
+// submitting the form, you can also use `.put`, `.patch` and `.delete`
+form.post(anUrl)
+   .then(response => ...)
+   .catch(response => ...);
 
-    data: {
-        form: new Form({
-            name: '',
-            text: ''
-        })
-    },
+// if there were any errors, you can get to them easily
 
-    methods: {
-        onSubmit() {
-            this.form.submit('post', '/newsItems');
-        }
-    }
-});
+// 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() 
+
+form.errors.any(); // returns true if there were any error
+
+form.errors.has(fieldName) // return true if there is an error for the given fieldName
+
+form.errors.get(fieldName) // return an array with errors for the given fieldName
+
+form.errors.clear() // forget all errors.
 ```
@@ -77,0 +68,0 @@

src/Errors.js

@@ -10,2 +10,11 @@ class Errors {
     /**
+     * Get all the errors.
+     *
+     * @param {object} errors
+     */
+    all() {
+        return this.errors;
+    }
+
+    /**
      * Determine if an errors exists for the given field.
@@ -12,0 +21,0 @@ *

src/Form.js

@@ -11,3 +11,12 @@ import axios from 'axios';
     constructor(data) {
+
+        if (Array.isArray(data)) {
+            data = data.reduce((carry, element) => {
+                carry[element] = '';
+                return carry;
+            }, {});
+        }
+
         this.originalData = data;
+        this.errors = new Errors();
 
@@ -17,4 +26,2 @@ for (const field in data) {
         }
-
-        this.errors = new Errors();
     }
@@ -48,3 +55,3 @@
      * Send a POST request to the given URL.
-     * .
+     *
      * @param {string} url
@@ -58,3 +65,3 @@ */
      * Send a PUT request to the given URL.
-     * .
+     *
      * @param {string} url
@@ -68,3 +75,3 @@ */
      * Send a PATCH request to the given URL.
-     * .
+     *
      * @param {string} url
@@ -78,3 +85,3 @@ */
      * Send a DELETE request to the given URL.
-     * .
+     *
      * @param {string} url
@@ -93,5 +100,7 @@ */
     submit(requestType, url) {
+        this.validateRequestType(requestType);
+        
         return new Promise((resolve, reject) => {
             axios[requestType](url, this.data())
-                .then(response => {
+                .then((response) => {
                     this.onSuccess(response.data);
@@ -101,6 +110,6 @@
                 })
-                .catch(error => {
+                .catch((error) => {
                     this.onFail(error.response.data);
 
-                    reject(error.response.data);
+                    reject(error.response);
                 });
@@ -111,2 +120,16 @@ });
     /**
+     * Validate a request type.
+     * 
+     * @param {string} requestType
+     */
+    validateRequestType(requestType) {
+        const requestTypes = ['get', 'delete', 'head', 'post', 'put', 'patch'];
+        
+        if (requestTypes.indexOf(requestType) === -1) {
+            throw new Error(`\`${requestType}\` is not a valid request type, ` +
+                `must be one of: \`${requestTypes.join('\`, \`')}\`.`);
+        }
+    }
+
+    /**
      * Handle a successful form submission.
@@ -130,2 +153,2 @@ *
 
-export default Form;
+export default Form;

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

131977

increased by1.46%

Lines of code

428

increased by15.68%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

99

decreased by-8.33%

No dependency changes