Why when the accept terms checkbox is not checked or the gender is not chosen then also my email shows up as incorrect?

Question

I am creating a sign up to newsletter form and my problem is that when my accept terms is not checked or one of the gender radio buttons is not selected then also my email is not validated even though they work on independent variables. When I type in the email, choose gender and check the terms I get 'success' in console as expected. Then with the same email when I uncheck the terms it shows both terms and email as invalid, same happens when no gender is chosen. I am writing this using vue.js

Template

    <form action="">
        <input type="email" @focus="showRestOfForm = true, invalidEmail = false" placeholder="Enter your email" class="email" 
        v-model="email" :class="{invalidEmail: invalidEmail}">
        <p v-if="invalidEmail" class="invalid-message">Incorrect Email Format</p>
        <!-- Animation for showing the rest of newsletter form -->
        <transition name="rest">
            <div class="rest-of-form" v-if="showRestOfForm">
                <div class="gender-selection" :class="{invalid: invalidGender}" @click="invalidGender = false">
                    <div class="gender-select">
                        <input type="radio" name="gender" value="man" v-model="gender">
                        <div class="custom-radio"></div>
                        <label for="man">man</label>
                    </div>
                    <div class="gender-select">
                        <input type="radio" name="gender" value="woman" v-model="gender">
                        <div class="custom-radio"></div>
                        <label for="woman" class="woman-label">woman</label>
                    </div>
                </div>
                <p class="invalid-message" v-if="invalidGender">Please select your gender</p>
                <div class="terms" :class="{invalid: invalidTerms}">
                    <input type="checkbox" id="terms" v-model="terms" @click="invalidTerms = false">
                    <label for="terms">Accept <a href="#">Terms and Regulations</a></label>
                </div>
                <p class="invalid-message" v-if="invalidTerms">Please accept the terms and regulations</p>
                <button class="sign-up" @click.prevent="signUp">Sign Up</button>
            </div>
        </transition>
    </form>

Script

 methods: {
        signUp() {
            // Validating email using a regular expression using RFC2822 reg expresssion validation
            // let emailValid
            const emailRegExp = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g

        if(emailRegExp.test(this.email) && this.gender && this.terms){
            console.log("success")
        }else{
            if(!emailRegExp.test(this.email)){
                this.invalidEmail = true
            }
            if(!this.gender){
                this.invalidGender = true
            }
            if(!this.terms){
                this.invalidTerms = true
            }
        }

    }
}

Scss

.invalidEmail{
        border: 0.1rem solid red;
        color: red;
    }

.invalid-message{
        color: red;
    }

    .invalid{
        color: red;
    }

Answer 1

Saw your comments. This is a weird one.

I built a test component based on your code in my Vue 2 sandbox app.

<template>
  <div class="email-validation">
    <h3>EmailValidation.vue</h3>
    <div class="row">
      <div class="col-md-6">
        <form>
          <input type="email" @focus="showRestOfForm = true, invalidEmail = false" placeholder="Enter your email"
            class="email" v-model="email" :class="{invalidEmail: invalidEmail}">
          <p v-if="invalidEmail" class="invalid-message">Incorrect Email Format</p>
          <!-- Animation for showing the rest of newsletter form -->
          <transition name="rest">
            <div class="rest-of-form" v-if="showRestOfForm">
              <div class="gender-selection" :class="{invalid: invalidGender}" @click="invalidGender = false">
                <div class="gender-select">
                  <input type="radio" name="gender" value="man" v-model="gender">
                  <div class="custom-radio"></div>
                  <label for="man">man</label>
                </div>
                <div class="gender-select">
                  <input type="radio" name="gender" value="woman" v-model="gender">
                  <div class="custom-radio"></div>
                  <label for="woman" class="woman-label">woman</label>
                </div>
              </div>
              <p class="invalid-message" v-if="invalidGender">Please select your gender</p>
              <div class="terms" :class="{invalid: invalidTerms}">
                <input type="checkbox" id="terms" v-model="terms" @click="invalidTerms = false">
                <label for="terms">Accept <a href="#">Terms and Regulations</a></label>
              </div>
              <p class="invalid-message" v-if="invalidTerms">Please accept the terms and regulations</p>
              <button class="sign-up" @click.prevent="signUp">Sign Up</button>
            </div>
          </transition>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showRestOfForm: false,
        email: '',
        gender: null,
        invalidEmail: false,
        invalidTerms: false,
        invalidGender: false,
        terms: false
      }
    },
    methods: {
      signUp() {
        // Validating email using a regular expression using RFC2822 reg expresssion validation
        // let emailValid
        const emailRegExp = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g

        if (emailRegExp.test(this.email) && this.gender && this.terms) {
          console.log("success")
        }
        else {
          console.log('entered else block')
          if ( !(emailRegExp.test(this.email)) ) {
            console.log('this.email')
            console.log(this.email);
            console.log('regex test result')
            console.log(emailRegExp.test(this.email))
            console.log('not regex test result')
            console.log(!emailRegExp.test(this.email))

            console.log('setting email invalid')
            this.invalidEmail = true
          }

          if (!this.gender) {
            this.invalidGender = true
          }

          if (!this.terms) {
            this.invalidTerms = true
          }
        }

      }
    }

  }
</script>

<style scoped>
  .invalidEmail {
    border: 0.1rem solid red;
    color: red;
  }

  .invalid-message {
    color: red;
  }

  .invalid {
    color: red;
  }
</style>

Notice the logging that I added to the email test in 'signUp()'.

When I run the app as you said with a valid email address but no gender or terms, I am getting the same error you describe.

Then when I look at the logging in my console, I see this:

Here you can see that both 'regex test result' and 'not regex test result' are returning 'true'.

So at this point I think you have a problem with your regex implementation. I'm not regex expert, but I did some searching and found the JS RegExp constructor.

I suggest simplying your regular expression, and possibly using the RegExp constructor, in order to see if you can get it working.

I found this simplified email regex, and it works now:

const emailRegExp = /^.+@.+\..+$/