Email validation in Vue.js

Question

I have been working with Vue for 24 hours now, so forgive the ignorance. I have searched around and I'm getting close, but I'm sure it's my lack of understanding and basic principles.

I have a modal that opens when a button is clicked. This modal displays a form with an email input. I managed to get the modal working, but nothing happens when I type in an incorrect email.

Here's my code for the component:

<template>
<div>
  <!-- Aside -->
  <aside class="aside">
    <button class="aside__btn button" @click="showModal = true">
      Send Me The Tips
    </button>
  </aside>

  <!-- Modal -->
  <div class="modal" v-if="showModal">
    <div class="modal-container">
      <a href="#" class="close" @click="showModal = false"></a>

      <p class="modal__steps">Step 1 of 2</p>
      
      <div class="relative">
        <hr class="modal__divider" />
      </div>

      <div class="modal__heading-container">
         <p class="modal__heading">Email Your Eail To Get <span class="modal__heading-span">Free</span>
         </p>
         <p class="modal__heading">iPhone Photography Email Tips:</p>
      </div>

      <form> 
        <input for="email" type="email" placeholder="Please enter your email here" required v-model="email">
        <span class="floating-placeholder" v-if="msg.email">{{msg.email}}</span>
        <!-- <span class="floating-placeholder">Please enter your email here</span> -->
        <button class="modal__button button">Send Me The Tips</button>
      </form>
    </div>
  </div>
  </div>
</template>

<script>
  export default ({
    data () {
      return {
        showModal: false,
        email: '',
        msg: [],
      }
    }, 
    watch: {
      email(value) {
        // binding this to the data value in the email input
        this.email = value;
        this.validateEmail(value);
      }
    },
    methods: {
      validateEmail(value){
        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value))
    {
      this.msg['email'] = '';
    } else{
      this.msg['email'] = 'Please enter a valid email address';
    } 
      }
    }
  })
</script>

I'm using Laravel if that's of importance.

Do you get any error on console? Your code works fine on my codesandbox — Owl
– Owl, Commented Jul 9, 2020 at 22:24
For whatever reason, its working now. Thank you. Now I'm attempting to change the font color of the error message based on a valid email. — Dave.Q
– Dave.Q, Commented Jul 9, 2020 at 22:37

jcoleau · Accepted Answer · 2025-02-28 15:23:15Z

19

I would delete the watch and add an event listener on blur like so:

<input for="email" type="email" placeholder="Please enter your email here" required v-model="email" @blur="validateEmail" >

and update the validateEmail method like so :

validateEmail() {
    if (/**<Your Regex Pattern>*/.test(this.email)) {
        this.msg['email'] = 'Please enter a valid email address';
    } else {
        this.msg['email'] = '';
    }
}

You could also change the event listener to change @change if it serves your needs better.

edited Feb 28 at 15:23

answered Jul 10, 2020 at 0:06

jcoleau

1,20010 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

9cco Feb 27 at 14:38

The regex in this answer introduces a DOS vulnerability since it is inefficient and can lead to an exponential-time complexity evaluation though a specially crafted email-value (se Ref) Please consider a less ambiguous regular expression like /^[\w0-9.%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/

Rasmus J. · Accepted Answer · 2020-07-10 12:27:54Z

2

You could also checkout Vuelidate which handles form validation. For example:

<template>
    <div>
        <input
            class="rounded shadow-sm border border-warning"
            v-model="form.email"
            placeholder="E-mail"
            @input="$v.form.email.$touch"
            :state="$v.form.email.$dirty ? !$v.form.email.$error : null" />
    </div>
</template>

<script>
import {required, email} from "vuelidate/lib/validators";
  
export default {
  data() {
    return {
      form: {
       
        email: null,
      }
    };
  },
  validations: {
    form: {
      email: {
        required,
        email
      }
    }
  },
};
</script>

answered Jul 10, 2020 at 12:27

Rasmus J.

211 bronze badge

Collectives™ on Stack Overflow

Email validation in Vue.js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related