making custom validation for password field in react

Question

I am making a custom registration page with only 2 values Email and Password, later I will add confirm password as well, for my password field I have some restrictions and I am using some regex and also some custom made code to make the validation.

this is my validateField:

validateField(fieldName, value) {
    let fieldValidationErrors = this.state.formErrors;
    let emailValid = this.state.emailValid;
    let passwordValid = this.state.passwordValid;
    //let passwordValidConfirm = this.state.passwordConfirmValid;
    switch(fieldName) {
      case 'email':
        emailValid = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
        fieldValidationErrors.email = emailValid ? '' : ' is invalid';
        break;
      case 'password':
        passwordValid = (value.length >= 5 &&  value.length <= 32) && (value.match(/[i,o,l]/) === null) && /^[a-z]+$/.test(value) && this.check4pairs(value) && this.check3InRow(value);
        fieldValidationErrors.password = passwordValid ? '': ' is not valid';
        break;
      default:
        break;
    }
    this.setState({formErrors: fieldValidationErrors,
                    emailValid: emailValid,
                    passwordValid: passwordValid,
                    //passwordValidConfirm: passwordValidConfirm
                  }, this.validateForm);
  }

as you can see for

passwordValid

I have made some methods, this one

check3InRow

doesnt work the way I want it to work, this one makes sure, you have at least 3 letters in your string that are in a row so like "abc" or "bce" or "xyz".

check3InRow(value){
    var counter3 = 0;
    var lastC = 0;
    for (var i = 0; i < value.length; i++) {
      if((lastC + 1) === value.charCodeAt(i)){
        counter3++;
        if(counter3 >= 3){
          alert(value);
          return true;
        }
      }
      else{
        counter3 = 0;
      }
      lastC = value.charCodeAt(i);
    }
    return false;
  }

this doesnt work correctly so it should accept this:

aabcc

as a password but not:

aabbc

Is it a react oriented problem? Or a general question on input validation? — Bird
– Bird, Commented Aug 1, 2018 at 12:58
well I think its more about input validation with custom validation! — S. N
– S. N, Commented Aug 1, 2018 at 12:59

Sookie Singh · Accepted Answer · 2018-08-01 13:00:26Z

1

You are starting your counter from 0 and looking for greater than equal to 3 which will never be 3 for 3 consecutive characters. Rest everything is fine with your code.

check3InRow(value) {
    var counter3 = 1;
    var lastC = 0;
    for (var i = 0; i < value.length; i++) {
        if ((lastC + 1) === value.charCodeAt(i)) {
            counter3++;
            if (counter3 >= 3) {
                alert(value);
                return true;
            }
        } else {
            counter3 = 1;
        }
        lastC = value.charCodeAt(i);
    }
    return false;
}

answered Aug 1, 2018 at 13:00

Sookie Singh

1,62313 silver badges17 bronze badges

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

Comments

Aritra Chakraborty · Accepted Answer · 2018-08-01 13:04:56Z

Can we not do a simple version of that function? Like

function check3InRow2(value){
    for (var i = 0; i < value.length-2; i++) {
        const first = value.charCodeAt(i);
        const second = value.charCodeAt(i+1);
        const third = value.charCodeAt(i+2);
        if(Math.abs(second - first)  === 1 && Math.abs(third-second) === 1){
            return true;
        }
    }
    return false;
}

I mean complexity wise it is O(N) so maybe we can give this a try

Also adding the your function. When you are AT a char then you should consider counter with 1. Because if another one matches it will be 2 consecutive values.

function check3InRow(value) {
    var counter3 = 1;
    var lastC = value.charCodeAt(0);
    for (var i = 1; i < value.length; i++) {
        if ((lastC + 1) === value.charCodeAt(i)) {
            counter3++;
            if (counter3 >= 3) {
                return true;
            }
        } else {
            counter3 = 1;
        }
        lastC = value.charCodeAt(i);
    }
    return false;
}

Collectives™ on Stack Overflow

making custom validation for password field in react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related