How to authenticate the client-side with Vue.js

How to authenticate the client-side with Vue.js

Almost every web application makes use of forms in some way, as such developers always have to tackle form validations. If you are a new developer, it can be hard deciding how best to approach this. Depending on the stack you are using, there are tons of options to choose from.

In this article, we discuss how to perform form validation on the client-side with Vue.js in order to ensure quality input from users.

Form Validation

I presume you’ve done some input validation before, and you don’t need an explanation of why it's required in real-world applications. Naturally, it’s not sufficient to simply validate the input on the client-side (using Vue, React, Angular, etc.). One must also validate it on the server-side. However, this would be outside of the scope of this tutorial. For now, we’ll focus on client-side validation only.

We will validate the input every time a user attempts to submit. Therefore, it would be fitting to put the validation logic inside the addGuest method. However, instead of doing that, we’ll define another method solely responsible for validation: isValid.

isValid: function () {
    return false
},

Let’s now call this method inside the addGuest method.


addGuest: function () {
    if (this.isValid()) {
        console.log(`Adding guest ${this.name} ${this.confirmed} ${this.tableNumber} ${this.allergies}`)
        let guest = {
            name: this.name,
            confirmed: this.confirmed,
            tableNumber: this.tableNumber,
            allergies: this.allergies
        }
        this.guests.push(guest)
        this.name = ''
        this.confirmed = false
        this.tableNumber = ''
        this.allergies = []
    } else {
        console.log("Input failed validation")
    }
}

You can see that we only proceed to add a guest if the isValid method returns true. For now, isValid always returns false, which means that we will always get the “Input failed validation” log in the console.

This is image title

Let’s fix the isValid method so it returns true or false appropriately. Here are the validation rules we must ensure are enforced:

  • Name is required.
  • Name is longer than 2 chars.
  • Name is no longer than 20 chars.
  • Table number has been set.

There’s no need to validate the RSVP or Dietary Requirements checkboxes, as all of those are optional. I’d like for you to attempt to implement the isValid method by yourself. Once you are done you can compare it to my solution:

isValid: function (name, tableNumber) {
    this.errors = []
    if (name === '') {
        this.errors.push("Name is required")
    } else if (name.length > 20 || name.length <= 2) {
        this.errors.push("Name must be at least 3 chars and at most 20 chars")
    }
    if (tableNumber === '') {
        this.errors.push("Table Number is required")
    }
    if (this.errors.length > 0) {
        return false
    } else {
        return true
    }
},

Now that we have a working validation method implemented, no invalid rows get inserted to the table. Success! However, it's only a partial win. Unfortunately, our current solution is not sufficient because there’s no visual feedback explaining why the form failed validation. Therefore, we must display a list of errors for our users benefit.

You can achieve this quite simply using the v-if and the v-for directives.

<div v-if="errors.length" class="alert alert-danger">
    <p>
        <b>Please correct the following error(s):</b>
    <ul>
        <li v-for="error in errors">{{ error }}</li>
    </ul>
    </p>
</div>

This is image title

We could improve this app by implementing inline validation. However, it’s up to you to try implementing this should you wish to do so. Inline validation means that errors would be displayed directly below the relevant field, rather than on top of the entire form. Inline validation is particularly useful for long forms where the user would have to scroll to see the errors.

Conclusion

In this tutorial, we’ve implemented a simple form validation with Vue. Client-side validation is a feature of every modern website, so the knowledge you gained today will come in handy when you're building your million dollar idea website!

Learn More

Thanks for reading !

vue vuejs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue component to hzqing vue Timeline

hzqing-vue-timeline . Vue's timeline plugin .A Vue component to hzqing-vue-timeline A Vue time plugin