Rudimentary form validation in Vue.js with Buefy/Bulma

By: (plus.google.com) +David Herron; Date: July 21, 2018

Tags: Vue.js » JavaScript

As a follow-up to Add/remove list items in Vue.js built with Bulma/Buefy we want to study form validation. That example includes a little form in which we enter some information, and we want a little bit of validation to make sure we don't add bad entries.

If you haven't already done so, go over the companion tutorial: Add/remove list items in Vue.js built with Bulma/Buefy

You'll need that code to run this tutorial.

Change the <template> in App.vue to this:

<template>
  <div id="list-add-delete" class="columns">
    <section id="items-area" class="column">
      <ul id="item-list">
        <li v-for="(item, index) of items" v-bind:key="index" :id="item.id">
          {{ item.item }}
          <button class="button is-medium is-primary"
              @click="removeItem(index)"><b-icon icon="close-box-outline"></b-icon></button>
        </li>
      </ul>
    </section>
    <section id="new-item-form" class="column">
        <div class="field">
            <b-switch v-model="deleteWithSplice">
                {{ deleteWithSplice ? ".splice" : "$delete" }}
            </b-switch>
        </div>
        <b-field horizontal label="id" :type="isIDlabelDanger" :message="IDLabelMessage">
            <b-input v-model="newId"></b-input>
        </b-field>
        <b-field horizontal label="label" :type="isItemLabelDanger" :message="ItemLabelMessage">
            <b-input v-model="newItem"></b-input>
        </b-field>
        <button class="button is-medium is-primary"
            :disabled="isNewItemFormDisabled"
            @click="addNewItem">Add</button>
    </section>
  </div>
</template>

What we've done is add a few classes to the <b-field> elements. In the Bulma/Buefy documentation the type and message attributes can be used as indicators that something is wrong in the input field. The type attribute has several possible values and we'll use is-danger to represent something is wrong. The message attribute will be used to display an explanation to the user.

A typical approach is for form elements with insane values, to draw a red border around the element, and to put a message below the element. Buefy/Bulma gives us that capability, when is-danger is set, and the type and message attributes are the first step.

For the next step, add this section in the data exported from <script> element

computed: {
    isIDlabelDanger() {
        if (this.newId === "") return "is-danger";
        let hasItem = this.hasItemById(this.newId);
        if (hasItem) {
            return "is-danger";
        } else {
            return "is-success";
        }
    },
    IDLabelMessage() {
        if (this.newId === "") return "Please enter an ID";
        let hasItem = this.hasItemById(this.newId);
        if (hasItem) {
            return "Please enter a unique ID";
        } else {
            return "";
        }
    },
    isItemLabelDanger() {
        if (this.newItem !== "") {
            return "is-success";
        } else {
            return "is-danger";
        }
    },
    ItemLabelMessage() {
        if (this.newItem !== "") {
            return "";
        } else {
            return "Please enter an Item";
        }
    },
    formIsInDanger() {
      if (this.isIDlabelDanger === "is-danger"
       || this.isItemLabelDanger === "is-danger") {
        return true;
      } else {
        return false;
      }
    },
    isNewItemFormDisabled() {
      if (this.formIsInDanger) return true;
      else return false;
    }
},

In Vue.js the computed object contains functions that, as the name implies, help with computing values. See (vuejs.org) https://vuejs.org/v2/api/#computed

These are similar to methods but cache the result like other properties. This means computed methods are not reinvoked unless needed, whereas methods are.

In this case the computed properties are associated with the type and message attributes, and compute the value for those attributes based on data stored by the application.

It boils down to setting either is-danger or is-success depending on whether the values are okay. This is computed using the formIsInDanger function. Using Vue.js syntax (:type="isIDlabelDanger" :message="IDLabelMessage") these component values are dynamically bound to the component so that the component is automatically updated as the user works with the application.

Another property is attached to the Add button. We want to prevent the user from even clicking that button unless the form elements are acceptable. Using :disabled="isNewItemFormDisabled" this button is either disabled, or not, depending on whether the form elements are in is-danger, or not.

The code depends on a function, hasItemById which must be added to the methods object:

methods: {
    ...
    hasItemById(id) {
        let hasItem = false;
        if (id === "") return hasItem;
        for (let item of this.items) {
          if (item.id === id) {
            hasItem = true;
            break;
          }
        }
        return hasItem;
    }
}

This function looks through the items array to see if one already has the given id value. The purpose here is to enforce the rule that there must be only one HTML element on a given page with the given id value. The function detects for us whether a proposed id is already in use.

What we've done is various forms of feedback showing whether form values are acceptable - and then disabling the form if form values are not acceptable.

It's simple and straightforward to implement and is somewhat effective. What was promised at the top is simple form validation not comprehensive form validation. Obviously there are other things which fall in the camp of form validation, so this is only the start.

« Doctor #13, Jodi Whittaker, and TARDIS crew at Comic-Con 2018 San Diego Add/remove list items in Vue.js built with Bulma/Buefy »
2016 Election 2018 Elections Acer C720 Ad block Air Filters Air Quality Air Quality Monitoring AkashaCMS Amazon Amazon Kindle Amazon Web Services America Amiga and Jon Pertwee Android Anti-Fascism AntiVirus Software Apple Apple Hardware History Apple iPhone Apple iPhone Hardware April 1st Arduino ARM Compilation Artificial Intelligence Astronomy Astrophotography Asynchronous Programming Authoritarianism Automated Social Posting AWS DynamoDB AWS Lambda Ayo.JS Bells Law Big Brother Big Data Big Finish Big Science Bitcoin Mining Black Holes Blade Runner Blockchain Blogger Blogging Books Botnets Cassette Tapes Cellphones China China Manufacturing Christopher Eccleston Chrome Chrome Apps Chromebook Chromebox ChromeOS CIA CitiCards Citizen Journalism Civil Liberties Climate Change Clinton Cluster Computing Command Line Tools Comment Systems Computer Accessories Computer Hardware Computer Repair Computers Conservatives Cross Compilation Crouton Cryptocurrency Curiosity Rover Currencies Cyber Security Cybermen Cybersecurity Daleks Darth Vader Data backup Data Formats Data Storage Database Database Backup Databases David Tenant DDoS Botnet Department of Defense Department of Justice Detect Adblocker Developers Editors Digital Nomad Digital Photography Diskless Booting Disqus DIY DIY Repair DNP3 Do it yourself Docker Docker MAMP Docker Swarm Doctor Who Doctor Who Paradox Doctor Who Review Drobo Drupal Drupal Themes DVD E-Books E-Readers Early Computers eGPU Election Hacks Electric Bicycles Electric Vehicles Electron Eliminating Jobs for Human Emdebian Encabulators Energy Efficiency Enterprise Node EPUB ESP8266 Ethical Curation Eurovision Event Driven Asynchronous Express Face Recognition Facebook Fake News Fedora VirtualBox Fifth Doctor File transfer without iTunes FireFly Flash Flickr Fraud Freedom of Speech Front-end Development G Suite Gallifrey Gig Economy git Github GitKraken Gitlab GMAIL Google Google Chrome Google Gnome Google+ Government Spying Great Britain Green Transportation Hate Speech Heat Loss Hibernate High Technology Hoax Science Home Automation HTTP Security HTTPS Human ID I2C Protocol Image Analysis Image Conversion Image Processing ImageMagick In-memory Computing InfluxDB Infrared Thermometers Insulation Internet Internet Advertising Internet Law Internet of Things Internet Policy Internet Privacy iOS iOS Devices iPad iPhone iPhone hacking Iron Man iShowU Audio Capture iTunes Janet Fielding Java JavaFX JavaScript JavaScript Injection JDBC John Simms Journalism Joyent Kaspersky Labs Kext Kindle Kindle Marketplace Large Hadron Collider Lets Encrypt LibreOffice Linux Linux Hints Linux Single Board Computers Logging Mac Mini Mac OS Mac OS X MacBook Pro Machine Learning Machine Readable ID Macintosh macOS macOS High Sierra macOS Kext MacOS X setup Make Money Online Make Money with Gigs March For Our Lives MariaDB Mars Mass Violence Matt Lucas MEADS Anti-Missile Mercurial MERN Stack Michele Gomez Micro Apartments Microsoft Military AI Military Hardware Minification Minimized CSS Minimized HTML Minimized JavaScript Missy Mobile Applications Mobile Computers MODBUS Mondas Monetary System MongoDB Mongoose Monty Python MQTT Music Player Music Streaming MySQL NanoPi Nardole NASA Net Neutrality Network Attached Storage Node Web Development Node.js Node.js Database Node.js Performance Node.js Testing Node.JS Web Development Node.x North Korea npm NVIDIA NY Times Online advertising Online Community Online Fraud Online Journalism Online Photography Online Video Open Media Vault Open Source Open Source and Patents Open Source Governance Open Source Licenses Open Source Software OpenAPI OpenJDK OpenVPN Palmtop PDA Patrick Troughton PayPal Paywalls Personal Flight Peter Capaldi Peter Davison Phishing Photography PHP Plex Plex Media Server Political Protest Politics Postal Service Power Control President Trump Privacy Private E-mail server Production use Public Violence Raspberry Pi Raspberry Pi 3 Raspberry Pi Zero ReactJS Recaptcha Recycling Refurbished Computers Remote Desktop Removable Storage Republicans Retro Computing Retro-Technology Reviews RFID Rich Internet Applications Right to Repair River Song Robotics Robots Rocket Ships RSS News Readers rsync Russia Russia Troll Factory Russian Hacking Rust SCADA Scheme Science Fiction SD Cards Search Engine Ranking Season 1 Season 10 Season 11 Security Security Cameras Server-side JavaScript Serverless Framework Servers Shell Scripts Silence Simsimi Skype SmugMug Social Media Social Media Networks Social Media Warfare Social Network Management Social Networks Software Development Software Patents Space Flight Space Ship Reuse Space Ships SpaceX Spear Phishing Spring Spring Boot Spy Satellites SQLite3 SSD Drives SSD upgrade SSH SSH Key SSL Stand For Truth Strange Parts Swagger Synchronizing Files Tegan Jovanka Telescopes Terrorism The Cybermen The Daleks The Master Time-Series Database Tom Baker Torchwood Total Information Awareness Trump Trump Administration Trump Campaign Twitter Ubuntu Udemy UDOO US Department of Defense Video editing Virtual Private Networks VirtualBox VLC VNC VOIP Vue.js Walmart Weapons Systems Web Applications Web Developer Resources Web Development Web Development Tools Web Marketing Webpack Website Advertising Weeping Angels WhatsApp William Hartnell Window Insulation Windows Windows Alternatives Wordpress World Wide Web Yahoo YouTube YouTube Monetization