JS проверка формы. Проверьте, существуют ли поля (полей), если это так, выполните функцию (и), если она возвращает true, чем отправьте форму - PullRequest
Новая
       6

JS проверка формы. Проверьте, существуют ли поля (полей), если это так, выполните функцию (и), если она возвращает true, чем отправьте форму

0 голосов
/ 24 января 2020

У меня есть функция, которая получает элемент formDOM. Он проверяет, существует ли поле через атрибут данных. Например: data-validate-email В этом случае его необходимо проверить с помощью соответствующей функции, например emailIsValid().

Все функции возвращают логическое значение с true или false. Как я могу управлять / отслеживать, если одна из функций возвращает false, чтобы я мог предотвратить отправку формы. Глобальная переменная не работает, потому что она перезаписывается следующей функцией. 

onSubmit(form, event)
{
    event.preventDefault();

    const fields = form.querySelectorAll( `[${textValidation}]`);
    const passwordField = form.querySelector(`[${passwordValidation}]`);
    const repeatPasswordField = form.querySelector(`[${passwordRepeatValidation}]`);
    const email = form.querySelector(`[${emailValidation}]`);

    if(fields)
    {
        this.TextIsValid(fields);
    }

    if(email)
    {
        this.emailIsValid(email);
    }

    if(passwordField)
    {
        this.passwordStrengthIsValid(passwordField);
    }

    if(repeatPasswordField)
    {
        this.passwordMatches(passwordField, repeatPasswordField);
    }
}

Ответы [ 3 ]

0 голосов
/ 24 января 2020

Вы можете иметь глобальную переменную finalStatus в сочетании с логическим оператором &&

onSubmit(form, event)
{
    event.preventDefault();

    let isValid = true;

    const fields = form.querySelectorAll( `[${textValidation}]`);
    const passwordField = form.querySelector(`[${passwordValidation}]`);
    const repeatPasswordField = form.querySelector(`[${passwordRepeatValidation}]`);
    const email = form.querySelector(`[${emailValidation}]`);

    if(fields)
    {
        isValid = isValid && this.TextIsValid(fields);
    }

    if(email)
    {
        isValid= isValid && this.emailIsValid(email);
    }

    if(passwordField)
    {
        isValid= isValid && this.passwordStrengthIsValid(passwordField);
    }

    if(repeatPasswordField)
    {
        isValid= isValid && this.passwordMatches(passwordField, repeatPasswordField);
    }

    console.log(isValid)
}

Вы можете даже сократить процесс, проверив состояние finalStatus в вашем if для не входите, если статус уже false

if(isValid && email)
0 голосов
/ 24 января 2020

Вы можете использовать Array и filter для решения этой проблемы. 

onSubmit(form, event);
{
  event.preventDefault();
  let validation = [];

  const fields = form.querySelectorAll(`[${textValidation}]`);
  const passwordField = form.querySelector(`[${passwordValidation}]`);
  const repeatPasswordField = form.querySelector(
    `[${passwordRepeatValidation}]`
  );
  const email = form.querySelector(`[${emailValidation}]`);

  if (fields) {
    validation.push(this.TextIsValid(fields));
  }

  if (email) {
    validation.push(this.emailIsValid(email));
  }

  if (passwordField) {
    validation.push(this.passwordStrengthIsValid(passwordField));
  }

  if (repeatPasswordField) {
    validation.push(this.passwordMatches(passwordField, repeatPasswordField));
  }

  // Filter the array with false value and then check the array length. 
  let validationStatus  = validation.filter(item => !item);
  if(validationStatus.length === 0) {
    //submit your form
  }
}
0 голосов
/ 24 января 2020

С вашим текущим решением будет работать что-то вроде этого: 

onSubmit(form, event)
{
    event.preventDefault();

    const fields = form.querySelectorAll( `[${textValidation}]`);
    const passwordField = form.querySelector(`[${passwordValidation}]`);
    const repeatPasswordField = form.querySelector(`[${passwordRepeatValidation}]`);
    const email = form.querySelector(`[${emailValidation}]`);
    const isValid = true;

    if(fields && !this.TextIsValid(fields))
    {
        isValid = false;
    }

    if(email && !this.emailIsValid(email);)
    {
        isValid = false;
    }
    // And so on...
}

Таким образом, ваша «глобальная» переменная isValid не будет переопределена на true, если пройдена одна из проверок. Ему может быть присвоено значение false, только если проверка НЕ ​​пройдена.

...