Возникает баг, когда сначала ввожу почту в поле 'confirm email', а затем в поле 'email'

Рейтинг: 0Ответов: 1Опубликовано: 13.02.2023

const regExps = {
    login: /^[a-z0-9_-]{3,16}$/,
    email: /^[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}$/i,
    pass: /^(?=.*[A-Z].*[A-Z])(?=.*[!@#$&*])(?=.*[0-9].*[0-9])(?=.*[a-z].*[a-z].*[a-z]).{8,}$/
}

const buttonNode = document.querySelector('.buttonSub');
const form = document.querySelector('form');
const inputs = document.querySelectorAll('.input');

const inputsData = {};

inputs.forEach( (input) => {
    inputsData[input.name] = {
        value: input.value,
        isValid: false,
    }
});
const confirmValidation = (input) => {
    if (input.name.includes('confirm')) {
        const replacedInputName = input.name.replace('_confirm', '');
        return regExps[replacedInputName].test(input.value) && input.value === inputsData[replacedInputName].value;
    } else {
        return regExps[input.name].test(input.value)
    }
}
const changeInput = (input) => {
    inputsData[input.name] = {
        value: input.value,
        isValid: confirmValidation(input)
    }
};

form.onchange = (e) => {
    const target = e.target;
    if (target.className !== 'input') return;

    changeInput(target)
    console.log(inputsData)
}
<form>

    <div class="email-block">
        <div class="emailField">Email</div>
        <input type="text" class="input" name="email">
    </div>

    <div class="email-confirm">
        <div class="emailConfirmField">Confirm email</div>
        <input type="text" class="input" name="email_confirm">
    </div>

    <button type="submit" class="buttonSub">Send</button>

</form>

email: 
{value: 'qwe@qwe.qwe', isValid: true}
email_confirm: 
{value: 'qwe@qwe.qwe', isValid: false}
[[Prototype]]: 
Object

Проблема в том, что значение ключа isValid у 'email_confirm' не меняется с false на true. Подскажите, пожалуйста, какую проверку необходимо сделать, чтобы значение ключа 'isValid' поменялось на 'true'

css javascript html регулярные-выражения валидация
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

У вас не осуществляется кросс проверка.

Могу предложить вот такой вариант проверки полей на соответствие друг другу. В объект inputsData добавляется новый ключ, который показывает, прошли поля проверку или нет.

  const regExps = {
    login: /^[a-z0-9_-]{3,16}$/,
    email: /^[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}$/i,
    pass: /^(?=.*[A-Z].*[A-Z])(?=.*[!@#$&*])(?=.*[0-9].*[0-9])(?=.*[a-z].*[a-z].*[a-z]).{8,}$/
  }

  const inputs = document.querySelectorAll('.input');

  const inputsData = {};

  inputs.forEach( (input) => {
    input.addEventListener('input', (e) => {
      changeInput(e.target);
    })
    inputsData[input.name] = {
      value: input.value,
      isValid: false,
    }
  });

  const confirmValidation = (input) => {
    return regExps[input.dataset['valid']].test(input.value)
  }
  const changeInput = (input) => {    
    inputsData[input.name] = {
      value: input.value,
      isValid: confirmValidation(input)
    }
    let test = true;
    let mail = '';
    for (let i in inputsData) {
      if (i === 'formValid') continue;
      if (!inputsData[i].isValid) {
        test = false;
        break;
      }
      if (!mail.length) {
        mail = inputsData[i].value;
        continue;
      }
      if (mail !== input.value) test = false
    }
    inputsData['formValid'] = test;
    console.log(inputsData)
  };
<form>
<div style='display: flex'>
  <div class="email-block">
    <div class="emailField">Email</div>
    <input type="text" class="input" name="email" data-valid="email">
  </div>

  <div class="email-confirm">
    <div class="emailConfirmField">Confirm email</div>
    <input type="text" class="input" name="email_confirm" data-valid="email">
  </div>
</div>
  <!-- <button type="submit" class="buttonSub">Send</button> -->

</form>