How to avoid duplicated code in password validation (JS)

Question

I have a simple password validation. Two input fields with icons clicking on which the user can see the entered password. The code works good. But I write two similar duplicate codes for two similar inputs. And cannot manage to shorten the code so that the event can be added once, and works for two inputs (but not simultaneously). Here is the JS code.

const password = document.getElementById('pass');
const repeatPass = document.getElementById('repeat_pass');

function validatePassword() {
    const icon = document.getElementById('icon1');
    const icon2 = document.getElementById('icon2');
    icon.addEventListener('click', () => {
        if (password.getAttribute('type') === 'password') {
            password.setAttribute('type', 'text');
            icon.classList.add('fa-eye-slash');
            icon.classList.remove('fa-eye');
        } else {
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
            password.setAttribute('type', 'password');
        }
    });

    icon2.addEventListener('click', () => {
        if (repeatPass.getAttribute('type') === 'password') {
            repeatPass.setAttribute('type', 'text');
            icon2.classList.add('fa-eye-slash');
            icon2.classList.remove('fa-eye');
        } else {
            icon2.classList.remove('fa-eye-slash');
            icon2.classList.add('fa-eye');
            repeatPass.setAttribute('type', 'password');
        }
    });

    const submit = document.querySelector('.password-form')
    const errorText = document.createElement('span');
    submit.addEventListener('submit', () => {
            if (password.value !== repeatPass.value) {
                repeatPass.after(errorText);
                errorText.innerText = 'Password does not match.';
                errorText.style.color = 'red';
            } else {
                password.value = "";
                repeatPass.value = "";
                alert('You are welcome');
            }
        }
    );
}

validatePassword();

Put your event handlers into a a function that contains the repeated code. — Randy Casburn
– Randy Casburn, Commented Dec 4, 2020 at 18:33
Why not simply put the validation logic in a extra function? — FelHa
– FelHa, Commented Dec 4, 2020 at 18:33

Matthew Moran · Accepted Answer · 2020-12-04 18:43:41Z

2

You could do something like this:

function myFunction(target, icon) { // create a function that accepts arguments
  const element = document.getElementById(target) // query whatever element you pass to it.
  if (element.getAttribute('type') === 'password') {
    element.setAttribute('type', 'text');
    icon.classList.add('fa-eye-slash');
    icon.classList.remove('fa-eye');
  } else {
    icon.classList.remove('fa-eye-slash');
    icon.classList.add('fa-eye');
    element.setAttribute('type', 'password');
  }
}

icon.addEventListener('click', () => myFunction('pass', icon)); // add the event listeners wrapped in anonymous function so it's not called immediately
icon2.addEventListener('click', () => myFunction('repeat_pass', icon2));

edited Dec 4, 2020 at 18:43

answered Dec 4, 2020 at 18:35

Matthew Moran

1,49712 silver badges22 bronze badges

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

3 Comments

John Paul R Over a year ago

They have two different icons, one for each password. In myFunction, the same icon is referenced for both passwords. That being said, this is the right general idea.

Matthew Moran Over a year ago

Updated by passing icon element as a second parameter.

John Paul R Over a year ago

Looks good. Just note, the var that they for the 1st icon is icon, not icon1.

John Paul R · Accepted Answer · 2020-12-04 18:36:29Z

You can create a function that accepts the different bits as arguments. Ex:

const password = document.getElementById('pass');
const repeatPass = document.getElementById('repeat_pass');

function clickShowHide(passwd, iconElem) {
    if (passwd.getAttribute('type') === 'password') {
        passwd.setAttribute('type', 'text');
        iconElem.classList.add('fa-eye-slash');
        iconElem.classList.remove('fa-eye');
    } else {
        iconElem.classList.remove('fa-eye-slash');
        iconElem.classList.add('fa-eye');
        passwd.setAttribute('type', 'password');
    }
}
function validatePassword() {
    const icon = document.getElementById('icon1');
    const icon2 = document.getElementById('icon2');
    
    icon.addEventListener('click', () => clickShowHide(password, icon));

    icon2.addEventListener('click', () => clickShowHide(repeatPass, icon2));

    const submit = document.querySelector('.password-form')
    const errorText = document.createElement('span');
    submit.addEventListener('submit', () => {
            if (password.value !== repeatPass.value) {
                repeatPass.after(errorText);
                errorText.innerText = 'Password does not match.';
                errorText.style.color = 'red';
            } else {
                password.value = "";
                repeatPass.value = "";
                alert('You are welcome');
            }
        }
    );
}

validatePassword();

Montecamo · Accepted Answer · 2020-12-04 18:47:20Z

You can refactor it in functional way, using js closures

The full code will be like this:

const password = document.getElementById('pass');
const repeatPass = document.getElementById('repeat_pass');

const togglePassword = (passwordId) => (iconId) => () => {
  const password = document.getElementById(passwordId);
  const icon = document.getElementById(iconId);

  if (password.getAttribute('type') === 'password') {
    password.setAttribute('type', 'text');
    icon.classList.add('fa-eye-slash');
    icon.classList.remove('fa-eye');
  } else {
    icon.classList.remove('fa-eye-slash');
    icon.classList.add('fa-eye');
    password.setAttribute('type', 'password');
  }
}

function validatePassword() {
    const icon = document.getElementById('icon1');
    const icon2 = document.getElementById('icon2');

    icon.addEventListener('click', togglePassword('pass')('icon1'));
    icon2.addEventListener('click', togglePassword('repeat_pass')('icon2'));


    const submit = document.querySelector('.password-form')
    const errorText = document.createElement('span');
    submit.addEventListener('submit', () => {
            if (password.value !== repeatPass.value) {
                repeatPass.after(errorText);
                errorText.innerText = 'Password does not match.';
                errorText.style.color = 'red';
            } else {
                password.value = "";
                repeatPass.value = "";
                alert('You are welcome');
            }
        }
    );
}

validatePassword();

Collectives™ on Stack Overflow

How to avoid duplicated code in password validation (JS)

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related