Development Create and validate form with element-ui and JSON schema. Fast and simple.

Last update: Oct 25, 2018

element-auto-form

State: development Create and validate form with element-ui and JSON schema. Fast and simple.

Install

npm i element-auto-form --save-exact

Use

Form Name

Validate and submit
`, data () { return { schema: schema, extend: { attributes: { 'label-width': '160px' } }, model: { name: '', email: '', list: '', agree: false } } }, mounted () { } })">
import ElementAutoFrom from 'element-auto-form'

let schema = {
  '$schema': 'http://json-schema.org/draft-04/schema#',
  'type': 'object',
  'attributes': {
    'size': 'small',
    'class': 'auto-form'
  },
  'properties': {
    'name': {
      'type': 'string',
      'minLength': 4,
      'maxLength': 30,
      'attributes': {
        'label': 'Full Name',
        'description': 'Please enter your full name. Min length 4, max length 30',
        'placeholder': 'Your Full Name'
      }
    },
    'email': {
      'type': 'string',
      'maxLength': 255,
      'attributes': {
        'type': 'email',
        'placeholder': 'Your Email',
        'label': 'Emails',
        'description': 'Please enter your email'
      }
    },
    'list': {
      'type': 'string',
      'enum': [
+        'Daily News',
        'Promotion'
      ],
      'attributes': {
        'placeholder': 'Select your list subscription',
        'description': 'Please select your list subscription'
      }
    },
    'agree': {
      'type': 'boolean',
      'default': false,
      'attributes': {
        'label': 'I`m agree',
        'type': 'checkbox'
      }
    }
  },
  'additionalProperties': false,
  'required': [
    'name',
    'email',
    'agree'
  ]
}

const App = new Vue({
  el: '#app',
  template: `
    

Form Name

Validate and submit
`, data () { return { schema: schema, extend: { attributes: { 'label-width': '160px' } }, model: { name: '', email: '', list: '', agree: false } } }, mounted () { } })

GitHub

https://github.com/vtimofeev/element-auto-form
You might also like...

Vue.js 2 form component that integrates jQuery Validation and Axios.

vue-vform Vue.js 2 form component that integrates jQuery Validation and Axios. Install Yarn yarn add vue-vform --dev NPM npm install vue-vform --save-

Jul 30, 2020

A dependency-free Vue plugin for formatting and validating credit card form fields.

A dependency-free Vue plugin for formatting and validating credit card form fields.

Jun 24, 2022

Results of small 30 min online coding challenge + small polishing afterwards. Vue JS login form + Express JS login endpoint with CORS middleware and validation of request

Install dependencies: npm -i install Start FE: npm run serve ./frontend/src/main.js Start BE: node ./backend/controller/index.js ToDo: tests docker-co

Jan 14, 2022

A Vue.js directive for sending data from form and primitive validation

Vue Form Send A Vue.js directive for sending data from form and primitive validation inputs Installation npm i --save-dev vue-form-send import VueForm

Apr 13, 2022

Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api

Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api

Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api. (Form Api, Validator Api, Rules Api, Error Messages Api)

Jun 25, 2022

Asynchronous form handling and validation for VueJS forms

Asynchronous form handling and validation for VueJS forms

Sep 24, 2019

Another validation form for the Vue. Validates input fields of multiple forms and displays errors

vue-coe-validator ✅ Another validation form for the Vue. Validates input fields of multiple forms and displays errors. Note: without any dependencies.

Jun 5, 2021

Form input errors and descriptions for Vue 2.

Form input errors and descriptions for Vue 2.

Feb 15, 2017

✅ Form Validation for Vue.js

✅  Form Validation for Vue.js

vee-validate is a form validation library for Vue.js that allows you to validate inputs and build better form UIs in a familiar declarative style or u

Jul 4, 2022
The easiest way to validate your forms without 3rd party packages
The easiest way to validate your forms without 3rd party packages

Easiest JS Validator It is a simple library ready to pull in into your project. Its goal is to provide an easy way to validate HTML forms without the

Jan 18, 2022
HTML validation using html-validate for NuxtJS
HTML validation using html-validate for NuxtJS

HTML validation using html-validate for NuxtJS

Jun 15, 2022
An easy way to validate forms using back end logic
An easy way to validate forms using back end logic

An easy way to validate forms using back end logic Wouldn't it be great if you could just use your back end to validate forms on the front end? This p

Jun 29, 2022
Vue.js form validation plugin that depends on the property not the HTML element on validating with no dependency and respect to Vue reactivity.

Vue.js form validation plugin that depends on the property not the HTML element on validating with no dependency and respect to Vue reactivity.

May 7, 2019
Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data

Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data. #install npm i vue-laravel-validator -

May 29, 2021
Simple Vuex module to handle form fields and validations
Simple Vuex module to handle form fields and validations

vuex-module-validatable-state Simple Vuex module to handle form fields and validations. You can build a view model for your form, which runs valdation

Mar 31, 2022
Simple and easy Vue directive for form validation.
Simple and easy Vue directive for form validation.

Simple and easy Vue.js directive for form validation.

Feb 15, 2021
Simple Vue.js form validation library

Simple Vue.js form validation library

Mar 1, 2020
Deadly simple form validation for Vue.js

vue-form-validator Deadly simple form validation for Vue.js. Features: Built in data types, including email, number, domain, url, etc. Customizable va

Aug 28, 2018
Create reactive validations for forms in Vue

Create reactive validations for forms in Vue

Jan 25, 2020