Sign in
Log inSign up

Form validation in Vue.js 2?

Basabana's photo
Basabana
·Apr 10, 2018

Hi everybody! I am a beginner at Vue.js 2. I would like to validate my registration form before submitting it. How can I do it?

 <form>

           <div class="form-text">
                <p class="control has-icon has-icon-right">
                  <input 
                  name="email" 
                  type="text"
                 placeholder="Email"
                  class="form-control">
                </p>
              </div>

              <div class="form-text">
                <p class="control has-icon has-icon-right">
                  <input 
                   name="phone"
                   type="text"
                   placeholder="Phone" 
                  class="form-control">
                </p>
              </div>


              <div class="form-text">
                <span class="custom-dropdown custom-dropdown--white">
                  <select class="custom-dropdown__select custom-dropdown__select--white" v-on:change="selectCountry" v-model="country">
                    <option value="" disabled selected>Choose your country</option>
                    <option v-for="country in countries" :value="country.dial_code" :key="country.code">{{country.name}}</option>
                  </select>
                  <p class="selectPlaceholder" v-show="this.showCountryPlaceholder">Choose your country</p>
                </span>
              </div>

              <div class="form-text">
                <input 
                 name="password" 
                class="form-control"
                type="text" 
                 placeholder="Password">
              </div>

              <div class="form-button">
                <button class="btn btn-default" id="submit" type="submit">Sign up
                  <i class="fas fa-arrow-right"></i>
                </button>
              </div>
            </form>
Hassle-free blogging platform that developers and teams love.
  • Docs by Hashnode
    New
  • Blogs
  • AI Markdown Editor
  • GraphQL APIs
  • Open source Starter-kit

© Hashnode 2024 — LinearBytes Inc.

Privacy PolicyTermsCode of Conduct