Editor’s note:This guide to forms in Vue.js was updated on 19 January 2021.
Learning to work with forms properly in our favorite frameworks is valuable, and it can save us some time and energy during development. In this tutorial, I will walk you through the process of creating, validating, and utilizing inputs from a form in a Vue.js v2.x application.
To follow along with this tutorial, you will need some knowledge of HTML and Vue.js. You can play around with the entire demo on CodePen.
Vue Form Playground
No Description
Setting up our Vue.js app
We will start by creating a simple Vue.js app with some basic HTML markup. We will also importBulmato take advantage of some pre-made styles:
<!DOCTYPE html><html><head> <title>Fun with Forms in Vue.js</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.4/css/bulma.min.css"></head><body> <div class="columns" id="app"> <div class="column is-two-thirds"> <section class="section"> <h1 class="title">Fun with Forms in Vue 2.0</h1> <p class="subtitle"> Learn how to work with forms, including <strong>validation</strong>! </p> <hr> <!-- form starts here --> <section class="form"></section> </section> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script><script> new Vue({ el: '#app' })</script></body></html>Binding input values with v-model
We can bind form input and textarea element values to the Vue instance data using the v-model directive. According to the Vue docs, the v-model directive enables you to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type.
Text input example
Let’s get started by creating a simple text input to get a user’s full name:
...<section class="form"> <div class="field"> <label class="label">Name</label> <div class="control"> <input v-model="form.name" class="input" type="text" placeholder="Text input"> </div> </div></section>...<script>new Vue({ el: '#app', data: { form : { name: '' } }})</script>
In the above code, we define the data option in our Vue instance and define a form object, which will hold all the properties we want for our form. The first property we define is name, which is bound to the text input we also created.
Now that two-way binding exists, we can use the value of form.name anywhere in our application, as it will be the updated value of the text input. We can add a section to view all the properties of our form object:
...<div class="columns" id="app"> <!-- // ... --><div class="column"> <section class="section" id="results"> <div class="box"> <ul> <!-- loop through all the `form` properties and show their values --> <li v-for="(item, k) in form"> <strong>{{ k }}:</strong> {{ item }} </li> </ul> </div> </section> </div></div>...
If you’re following along properly, you should have the same result as the fiddle below. Try typing in the input box:
Note that v-model will ignore the value, checked, or selected attributes of form inputs and will treat the Vue instance data as the source of truth. This means that you can also specify a default value for form.name in the Vue instance. That is what the initial value of the form input will be.
Textarea example
These work the same way regular input boxes work:
...<div class="field"> <label class="label">Message</label> <div class="control"> <textarea class="textarea" placeholder="Message" v-model="form.message"></textarea> </div></div>...
And the corresponding value in the form model:
data: { form : { name: '', message: '' // textarea value }}It’s important to note that interpolation in textarea — <textarea>{{ form.message}}</textarea> — will not work for two-way binding. Use the v-model directive instead.
Using the v-model directive for select boxes
The v-model directive can also be easily plugged in for select boxes. The defined model will be synced with the value of the selected option:
...<div class="field"> <label class="label">Inquiry Type</label> <div class="control"> <div class="select"> <select v-model="form.inquiry_type"> <option disabled value="">Nothing selected</option> <option v-for="option in options.inquiry" v-bind:value="option.value"> {{ option.text }} </option> </select> </div> </div></div>...
In the above code, we chose to load the options dynamically using the v-for directive. This requires us to also define the available options in the Vue instance:
data: { form : { name: '', message: '', inquiry_type: '' // single select box value }, options: { inquiry: [ { value: 'feature', text: "Feature Request"}, { value: 'bug', text: "Bug Report"}, { value: 'support', text: "Support"} ] }}The process is similar for a multi-select box. The difference is that the selected values for the multi-select box are stored in an array.
For example:
...<div class="field"> <label class="label">LogRocket Usecases</label> <div class="control"> <div class="select is-multiple"> <select multiple v-model="form.logrocket_usecases"> <option>Debugging</option> <option>Fixing Errors</option> <option>User support</option> </select> </div> </div></div>...
And defining the corresponding model property:
data: { form : { name: '', message: '', inquiry_type: '', logrocket_usecases: [], // multi select box values }, // ..}In the example above, the selected values will be added to the logrocket_usecases array.
Checkbox example
Single checkboxes which require a boolean (true/false) value can be implemented like this:
...<div class="field"> <div class="control"> <label class="checkbox"> <input type="checkbox" v-model="form.terms"> I agree to the <a href="#">terms and conditions</a> </label> </div></div>...
Defining the corresponding model property:
>data: { form : { name: '', message: '', inquiry_type: '', logrocket_usecases: [], terms: false, // single checkbox value }, // ..}The value of form.terms in the example above will either be true or false depending on whether the checkbox is checked or not. A default value of false is given to the property, hence the initial state of the checkbox will be unchecked.
For multiple checkboxes, they can simply be bound to the same array:
...<div class="field"> <label> <strong>What dev concepts are you interested in?</strong> </label> <div class="control"> <label class="checkbox"> <input type="checkbox" v-model="form.concepts" value="promises"> Promises </label> <label class="checkbox"> <input type="checkbox" v-model="form.concepts" value="testing"> Testing </label> </div></div>...data: { form : { name: '', message: '', inquiry_type: '', logrocket_usecases: [], terms: false, concepts: [], // multiple checkbox values }, // ..}
Radio buttons example
For radio buttons, the model property takes the value of the selected radio button.
Here’s an example:
...<div class="field"> <label><strong>Is JavaScript awesome?</strong></label><div class="control"> <label class="radio"> <input v-model="form.js_awesome" type="radio" value="Yes"> Yes </label> <label class="radio"> <input v-model="form.js_awesome" type="radio" value="Yeap!"> Yeap! </label> </div></div>...data: { form : { name: '', message: '', inquiry_type: '', logrocket_usecases: [], terms: false, concepts: [], js_awesome: '' // radio input value }, // ..}
Validating user inputs with vee-validate
While writing custom validation logic is possible, there is already a great plugin that helps validate inputs easily and displays the corresponding errors. This plugin is vee-validate.
This form validation library for Vue.js allows you to validate inputs and build form UIs in a declarative style, or using composition functions.
First, we need to include the plugin in our app. This can be done with yarn or npm, but in our case, including it via CDN is just fine:
<script src="https://unpkg.com/[emailprotected]/dist/vee-validate.js"></script>
To set up the plugin, we will place this just right above our Vue instance:
Vue.use(VeeValidate);
Now, we can use the v-validate directive on our inputs and pass in the rules as string values. Each rule can be separated by a pipe.
Taking a simple example, let’s validate the name input we defined earlier:
...<div class="field"> <label class="label">Name</label> <div class="control"> <input name="name" v-model="form.name" v-validate="'required|min:3'" class="input" type="text" placeholder="Full name"> </div> </div>...
In the above example, we defined two rules: the first is that the name field is required (required), the second is that the minimum length of any value typed in the name field should be three (min:3).
Tip: Rules can be defined as objects for more flexibility. For example:
v-validate=”{required: true, min: 3}”
To access the errors when these rules aren’t passed, we can use the errors helper object created by the plugin. For example, to display the errors just below the input, we can add this:
<p class="help is-danger" v-show="errors.has('name')"> {{ errors.first('name') }}</p>
In the code above, we take advantage of a couple of helper methods from the vee-validate plugin to display the errors:
.has()helps us check if there are any errors associated with the input field passed in as a parameter. It returns a boolean value (true/false)..first()returns the first error message associated with the field passed in as a parameter.
Other helpful methods include .collect(), .all(), and .any(). You can read more on them here.
Note that the name attribute needs to be defined on our input fields as this is what vee-validate uses to identify fields.
Finally, we can add an is-danger class (provided by Bulma) to the input field to indicate when there’s a validation error for the field. This would be great for the user experience, as users would immediately see when an input field hasn’t been filled properly.
The entire field markup will now look like this:
...<div class="field"> <label class="label">Name</label> <div class="control"> <input name="name" v-model="form.name" v-validate="'required|min:3'" v-bind:class="{'is-danger': errors.has('name')}" class="input" type="text" placeholder="Full name"> </div> <p class="help is-danger" v-show="errors.has('name')"> {{ errors.first('name') }} </p> </div>...
You can see the work in progress so far in the results tab in the fiddle below:
JSFiddle
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
vee-validate has a good number of predefined rules that cater to the generic use cases . The full list of available rules can be found here. Custom validation rules can also be defined if your form has any needs that aren’t covered by the generic rules.
Creating custom validation rules with Validator.extend()
We can create custom rules using the Validator.extend() method. Your custom rules must adhere to a contract or a certain structure.
Let’s add a validation method that forces our users to be polite when sending messages:
VeeValidate.Validator.extend('polite', { getMessage: field => `You need to be polite in the ${field} field`, validate: value => value.toLowerCase().indexOf('please') !== -1});
Our validator consists of two properties:
getMessage(field, params): Returns a string — the error message when validation fails.validate(value, params): Returns a boolean, object, or promise. If a boolean isn’t returned, thevalid(boolean)property needs to be present in the object or promise.
vue-validate was also built with localization in mind. You can view notes on translation and localization in the full vue-validate custom rules docs.
Form submission with event handler
To handle form submissions, we can make use of Vue’s submitevent handler. For method event handlers, we’ll use the v-on method. We can also plug in the .prevent modifier to prevent the default action, which in this case would be the page refreshing when the form is submitted:
...<form v-on:submit.prevent="console.log(form)"> ... <div class="field is-grouped"> <div class="control"> <button class="button is-primary">Submit</button> </div> </div></form>...
In the above example, we simply log the entire form model to the console on form submission.
We can add one final touch with vee-validate to make sure that users aren’t allowed to submit an invalid form. We can achieve this using errors.any():
<button v-bind:disabled="errors.any()" class="button is-primary"> Submit</button>
In the above code, we disable the submit button once any errors exist in our form.
Great! Now we have built a form from scratch, added validation, and can use the input values from the form. You can find the entire code we have worked on here on CodePen.
Final notes
Some other key things to note:
- Some modifiers exist for
v-modelon form inputs, including.lazy,.number, and.trim. You can read all about them here. - Dynamic properties can be bound to input values using
v-bind:value. Check the docs on Value Bindingsfor more info.
In this guide, we have learned how to create a form in a Vue.js app, validate it, and work with its field values. We addressed one way to create a form in Vue.js, but there are other options. This tutorial shows you how to create forms with Vue Formulate.
Do you have any questions or comments about forms in Vue.js, or maybe how they compare to forms in other frameworks? Feel free to drop a comment and let’s get talking!
Experience your Vue apps exactly how a user does
Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket. https://logrocket.com/signup/
LogRocket is like a DVR for web and mobile apps, recording literally everything that happens in your Vue apps including network requests, JavaScript errors, performance problems, and much more. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.
The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.
Modernize how you debug your Vue apps - Start monitoring for free.
FAQs
What is the best way to validate forms in Vue? ›
The easiest way to do this in Vue is to use the HTML5 validation attributes. These are things like required, minLength, maxLength and type that tell the browser when something unexpected is in the form inputs.
How create a simple form using vue js? ›- <template>
- <div>
- <form @submit.prevent="submitForm" v-if="! formSubmitted">
- <span>Full Name</span><br>
- <input.
- v-model="name"
- type="text"
- placeholder="Enter your name"
- STEP 01: Invoke the $emit() method in the child component where you want to send a piece of the data to its parent component.
- STEP 02: Use the same $event name prefixed with the @ symbol where you define the child component inside the template in the parent component.
validate() – Validates the selected form. valid() – Checks whether the selected form or selected elements are valid.
How do you validate a form field before submitting? ›What is form validation. Before submitting data to the server, you should check the data in the web browser to ensure that the submitted data is in the correct format. To provide quick feedback, you can use JavaScript to validate data. This is called client-side validation.
What is the alternative for Vue form? ›The best alternatives to Vue Formulate are Gomix, Jotform, and Cognito Forms. If these 3 options don't work for you, we've listed a few more alternatives below.
How to generate PDF from HTML in Vue? ›export default { name: 'app', methods: { exportToPDF() { html2pdf(document. getElementById('element-to-convert')); }, }, }; The exportToPDF function takes a second parameter, an object, which allows you to configure some options that control how the PDF will look.
How do I get form values in Vue? ›To get an input value in Vue, we can use the v-model directive to set up a two-way binding between the value and a variable. Every time the user changes the text in the input field, the text variable will be updated automatically. We can then use this variable to perform an action or display information.
How do I create a custom directive in Vue? ›- Globally. Vue. directive('directive-name', { bind: function (el, binding, vnode) { // code } }); ...
- Locally. directives: { directive-name: { bind: function (el, binding, vnode) { // code } } } Syntax to register a custom directive locally.
To get this form's data via JavaScript, you'll need to attach specific attributes to the form input field and the form itself. These attributes can be an id , a class , or even with the name tag. This will help get the data in JavaScript using their document methods.
How do I automatically pass form data to another form? ›
- In Form Builder, click on Settings at the top.
- Choose Thank You Page on the left.
- Select Redirect to an external link after submission.
- Finally, enter the landing page's URL in the Enter URL field.
To access form fields, you can use DOM methods like getElementsByName() , getElementById() , querySelector() , etc. Also, you can use the elements property of the form object. The form. elements property stores a collection of the form elements.
What are the three types of form validation? ›- Server-side Validation. With server-side validation, all form information entered by the user is sent to the server to be validated upon form submittal. ...
- Client-side Validation. ...
- Real-time Validation.
So the different types of validation, we have emotional and behavioral and cognitive validation.
When should you use form required? ›Definition and Usage
The required attribute is a boolean attribute. When present, it specifies that an input field must be filled out before submitting the form. Note: The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.
Form validation is useful when you need a user to input information that is expected to meet certain requirements. There are two validation standards: server side validation and client side validation.
How do you validate data in the form? ›- Data Type Check. A data type check confirms that the data entered has the correct data type. ...
- Code Check. A code check ensures that a field is selected from a valid list of values or follows certain formatting rules. ...
- Range Check. ...
- Format Check. ...
- Consistency Check. ...
- Uniqueness Check.
- Select the field that you want to validate.
- On the Fields tab, in the Field Validation group, click Validation, and then click Field Validation Rule.
- Use the Expression Builder to create the rule.
Nintendo, UpWork, and Netflix are only a few of the companies using Vue. js. Because of the advantages of Vue. js, many companies and businesses use the framework to enhance their software development process.
Which Vue form library is best? ›- FormKit Vue 3 Form Authoring Framework. ...
- Vueform Form Builder. ...
- Vuetify.js Material Component Framework. ...
- PrimeVue UI Component Library. ...
- Element Plus UI Component Library. ...
- Quasar Framework Multi-Platform Framework. ...
- Vuelidate Model-based Validation. ...
- VeeValidate Form Validation Library.
Which database is best for Vue? ›
js based, and I think ExpressJS or NestJS is the best choice. We recommend choosing React or Vue as the FrontEnd. PostgreSQL is currently the best performing database. These three combinations have many examples, and their superiority has been confirmed by my implementation in many projects already.
How to create a dynamic form in JavaScript? ›- Step 1 − Create a simple HTML boilerplate code on your editor. ...
- Step 2 − Create a javascript arrow function inside the script tag.
- Step 3 − Now get the form in a variable, using document. ...
- Step 4 − From here start building your dynamic form.
call JavaScript function on quick create form
Go to settings-> Customization->Solution or Customize the system --> Go to your entity --> Select Quick Create Form --> Add your JavaScript web resource.
You can get all of the elements in the form by getting the form itself, and then calling the elements property on it. var form = document. querySelector('#my-form'); var elements = form.
Can you write HTML in Vue? ›Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
How to bind HTML in Vue js? ›Hence, to assign values to HTML attributes, we need to bind it with the directive v-bind as follows. VueJS also provides a shorthand for v-bind as follows. If we see the inspect element in the browser, the anchor tag does not show the v-bind attribute, however, it displays the plain HTML.
How to connect HTML with Vue js? ›The simplest way to get started with Vue is to grab the development version script for it and add it to the head tag of your HTML file. Then you can start Vue code inside the HTML file inside of script tags. And have the Vue code connect up with an existing element on your HTML page.
What are the 3 parts of a component in Vue? ›Components in Vue are composed of three parts; a template (which is like HTML), styles and JavaScript.
How do I create a layout in Vue? ›- Create App.
- Folder structure.
- Create Header Component.
- Create Footer component.
- Create Layout component.
- Add Layout to the Root component.
- Create a dashboard route.
- Create a new dashboard component.
- Create the user service to connect to the Express API.
- Make a GET request to the Express API's /users route.
- Loop over and display the users.
- Create a delete button and delete method.
How to get value from dropdown in Vue? ›
- Created a select box inside the template syntax.
- Added an onChange() event handler.
- Created an options list, cars name primarily.
- Used the on-change method to grab the selected value using the event object.
v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa. But v-bind:value is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.
How to get input value from a form in js? ›- function getVal() {
- const val = document. querySelector('input'). value;
- log(val);
Components define widgets - these are sections of html that have behavior associated with them. Directives modify behavior of sections of html (which may or may not be widgets). Save this answer.
How to create API in Vue? ›- Create the Basic Skeleton Of a Web Application.
- Create the Basic Vue.js Component.
- Create the Stylesheet for the Vue Component.
- Add API call to Vue.js Component.
- Display API Data In Vue.js Component.
- Styling the Vue.js Component.
By default, there are two types of empty directives that are supported which are listed below.
How to get all values from FormData? ›The getAll() method of the FormData interface returns all the values associated with a given key from within a FormData object. Note: This method is available in Web Workers.
How to pass FormData to JSON? ›Formating data to JSON and making a POST request
fromEntries() method. Using the JSON. stringify() method then format the plain form data as JSON. Specify the HTTP request method as POST and using the header field of the Fetch API specify that you are sending a JSON body request and accepting JSON responses back.
- Capture the form's submit event and prevent the default submission.
- Convert the form's child elements to JSON.
- Check to make sure only form field elements are added to the object.
- Add a safeguard to only store checkable fields if the checked attribute is set.
In Acrobat, open the completed form file. In the right hand pane, choose More > Export Data. In the Export Form Data As dialog box, select the format in which you want to save the form data (FDF, XFDF, XML, or TXT). Then select a location and filename, and click Save.
Can you autofill forms? ›
Autofill is a function on a browser or program that can automatically fill in fields with saved data. Online forms that allow autofill are especially useful to save users' time for common fields like Name, Email, and Address, but they can also be used to autofill information like passwords and credit card numbers.
How do I transfer data from form to database? ›- Define Queries. We will define two queries. ...
- Generate XML Schema. ...
- Create the Form. ...
- Link to the Database. ...
- Define the SQL Query. ...
- Generate an XML Schema. ...
- Create the Form. ...
- Link to the Database.
To see a form in datasheet view, display the form, click the down arrow next to the View button and choose Datasheet View. The Datasheet View shows the records in an Access table. In addition, each row is one record and the columns are the fields from the table's definition.
How do I send form data to request body? ›To post HTML form data to the server in URL-encoded format, you need to make an HTTP POST request to the server and provide the HTML form data in the body of the POST message in key=value format. You must also specify the data type using the Content-Type: application/x-www-form-urlencoded request HTTP header.
What is the best way to validate react form? ›First, you use const methods = useForm() to set up the form methods from react-hook-form for form management. Next, you create a custom onSubmit function that utilizes the methods to handle form submission, which we'll run when the form is successfully submitted.
How the forms are validated? ›Form validation is a “technical process where a web-form checks if the information provided by a user is correct.” The form will either alert the user that they messed up and need to fix something to proceed, or the form will be validated and the user will be able to continue with their registration process.
What can be used to perform form validation? ›HTML form validation can be done by JavaScript.
Which method is used to add dynamic validation to the forms? ›Dynamically Add Validators
We need to listen to optionB value changes and based on that we add or remove the validators we require. We also call the control's updateValueAndValidity() method, as we need to recalculate the value and validation status of the control.
- React Hook Form. React Hook Form - Performant, flexible and extensible forms with easy-to-use validation. ...
- Formik. Formik allows us to build complex forms easily. ...
- rc-field-form. rc-field-form- React Performance First Form Component. ...
- React Final Form. ...
- react-credit-cards. ...
- formsy-react. ...
- react-form. ...
- uniforms.
The most popular library for forms in React is React Hook Form. It comes with everything needed from validation (most popular integrations is zod) over submission to form state management. As alternative there are Formikand React Final Form.
What is the best way to handle form input in React? ›
The standard way to handle form input value changes is to handle them with React. This is a technique called controlled components. We can create controlled components with input , textarea , and select elements. They maintain their own state, and updates are based on user input.
How to check if a form is valid in JavaScript? ›- <script>
- function validate(){
- var num=document.myform.num.value;
- if (isNaN(num)){
- document.getElementById("numloc").innerHTML="Enter Numeric value only";
- return false;
- }else{
- return true;
There are two different types of form validation – Client side validation and Server side validations.
How do I manually trigger form validation? ›You have to define and bind the EditContext with EditForm and then call the method editContext. Validate() on button click to manually trigger the validation.
How to check all fields are filled in JavaScript? ›- Javascript function to check whether a field is empty or not // If the length of the element's string is 0 then display helper message function required(inputtx) { if (inputtx.value.length == 0) { alert("message"); return false; } return true; } ...
- Flowchart:
The following are the common Data Validation Types:
Range Check. Format Check. Consistency Check.
- Select one or more cells to validate.
- On the Data tab, in the Data Tools group, click Data Validation.
- On the Settings tab, in the Allow box, select List.
- In the Source box, type your list values, separated by commas. ...
- Make sure that the In-cell dropdown check box is selected.
- Create a factory function and pass parameters that will be passed to the custom validator to this function.
- The return type of the factory function should be ValidatorFn which is part of @angular/forms.
There are different ways to automate your data validation. You can use a cloud service like Arcion, or download an open-source tool such as the Google Data Validation Tool, DataTest, Colander or Voluptuous, which are all Python packages.