Email validation is not working correctly - don't know why it's not running properly

Question

I'm creating this function to change the styles of my input when an invalid input is typed in. Everything works fine except the email validation. (I want the border to change to green when everything is working, and to red when it's not. All of my console logs are coming out exactly as I want them to, so I believe the regex statement is correct... it's just not changing the border like it's supposed to.

Any idea why?

onInputBlur = (event) => {
   console.log('onblur')
    let inputInfo = event.target
    let inputVal = event.target.value,
        { styles } = this.props,
        fontSize = styles.placeholder.fontSize || 10,
        top = styles.placeholder.top || 4
    let emailRegex = new RegExp(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
       console.log(inputInfo.id.toString())
       console.log(emailRegex.test(inputVal))




if(inputVal){
  //zipcode
           if(inputInfo.id.toString() == 'zip' && inputVal.split('').length < 4){
               console.log('ziphit')
                return this.setState(state =>({
                  inputCSS:{
                   ...state.inputCSS,
                   border: '1px solid red'
                 }
              }))
          } else if (inputInfo.id.toString() == 'zip' && inputVal.split('').length >= 4){
                return this.setState(state => ({
                  inputCSS: {
                    ...state.inputCSS,
                    border: '1px solid green'
                  }
                }))
              }
  //phone
          if(inputInfo.id.toString() == 'phone' && inputVal.split('').length < 10){
            return this.setState(state =>({
              inputCSS: {
                ...state.inputCSS,
                border: '1px solid red'
              }
            }))
          } else {
            return this.setState(state => ({
              inputCSS: {
                ...state.inputCSS,
                border: '1px solid green'
              }
            }))
          }
  //email
          if(inputInfo.id.toString() == 'email' && !emailRegex.test(inputVal)){
            console.log('email hit - invalid input')
            return this.setState(state => ({
              inputCSS: {
                ...state.inputCSS,
                border: '1px solid red'
              }
            }))
          } else {
            console.log('email hit - valid email')
            return this.setState(state => ({
              inputCSS: {
                ...state.inputCSS,
                border: '1px solid green'
              }
            }))
          }

    return this.setState(state =>({
      inputCSS: {
        ...state.inputCSS,
        border: '1px solid green'
     }
   }))
 }  else {
      return this.setState(state=> ({
        inputCSS: {
          ...state.inputCSS,
          border: '1px solid red'
        }
    }))
  }

}

Answer 1

You are checking with if/else @ phone. Try console.logging in the phone case's else (which is ran before email) and I'm assuming it will fire the console.log(); you put there now.

You see, the statement if(inputInfo.id.toString() == 'phone' && inputVal.split('').length < 10) will ALWAYS return to else if the field you're typing in is not phone.

So, you never get past the phone's else statement. Email is underneath it, but the function returns before it ever gets there. The email check will never be executed.

It should be like your first function, like this;

 if(inputInfo.id.toString() == 'phone' && inputVal.split('').length < 10){
            return this.setState(state =>({
              inputCSS: {
                ...state.inputCSS,
                border: '1px solid red'
              }
            }))
          } else if(inputInfo.id.toString() == 'phone') {
            return this.setState(state => ({
              inputCSS: {
                ...state.inputCSS,
                border: '1px solid green'
              }
            }))
          }

-- Make sure you do this for all of these cases.

By the way, in general, switch-cases are used in these types of scenarios. A switch case doesn't need the else-if's. It actually breaks on the case it should be on, preventing issues like the one you are facing right now. Like so;

var fieldType = inputInfo.id.toString();
switch (fieldType) {
  case "phone":
    if (inputVal.split('').length) {
      //return on true
    } else {
      //return on false;
    }
    break;
}

It's even better practice to not have so many returns in your code, like so;

var fieldType = inputInfo.id.toString();
var returnValue = {};
switch (fieldType) {
  case "phone":
    if (inputVal.split('').length) {
      returnValue.state = "my stuff";
    } else {
      returnValue.state = "my stuff";
    }
    break;
  case "email":
    if (inputVal.split('').length) {
      returnValue.state = "my stuff";
    } else {
      returnValue.state = "my stuff";
    }
    break;
}
return this.setState(returnValue);

Sorry for not using ES6. I don't know any ES6 syntax yet =)