Иметь функцию, если другая правда

Question

Я пытаюсь получить подтверждение формы.Мне удалось создать функцию проверки и сохранить ее в переменной, чтобы ее было легче написать в будущем.

var a = $('#email').keyup(function(){
      var emailRegexp = /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/;
      if (emailRegexp.test($('#email').val())) {
        $('#email').addClass('correct');
        $('#email').removeClass('error');
        $('.email-error').html("");
        return true;
      } else {
        $('#email').addClass('error');
        $('.email-error').html("Invalid e-mail");
        return false;
      }
    });

, и у меня есть вторая функция, которая должна иметь 2 случая, если a === true или a=== false:

  $(document).ready(function(){
        $('#next1').click(function(){
          if (a === true) {
            $('.first-nav').css({
              "color":"white",
              "background-color":"rgba(133,179,181,1)"});
          } else if(a === false) {
            $('.first-nav').css({
              "color":"white",
            "background-color":"red"});
          }
        });
      });

однако в первой функции, даже если условие выполнено, ничего не возвращается, поэтому вторая функция не работает.Я думал, что для второй функции, чтобы изменить и не получить значение true / false, а вместо этого попытаться получить атрибут class из id = email.

Answer 1

это не совсем отвечает на ваш вопрос, но я хочу упомянуть, что вы также можете использовать атрибут шаблона html5 вместо javascript.так что у вас есть возможность проверки формы в формате html5 / css.

вы можете найти объяснение и пример, включая css для разработки ваших полей, если форма верна / недействительна здесь: https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute--cms-25145

Answer 2

Ваша переменная a относится к объекту jQuery, а не к логическому значению, поэтому она не пройдет проверку a === true и a === false. Вам нужно обновить переменную в обработчике события keyup:

// Assume invalid by default
var a = false;

// Update variable when email is filled out
$('#email').keyup(function(){
  var emailRegexp = /^([a-z\d\.-]+)@([a-z\d-]+)\.([a-z]{2,8})(\.[a-z]{2,8})?$/;
  if (emailRegexp.test($('#email').val())) {
    $('#email').addClass('correct');
    $('#email').removeClass('error');
    $('.email-error').html("");
    a = true;
  } else {
    $('#email').addClass('error');
    $('.email-error').html("Invalid e-mail");
    a = false;
  }
});

Затем вы можете оценить a, как вы делаете сейчас. Поскольку это всегда логическое значение, вам не нужно использовать === сравнение:

$('#next1').click(function(){
  if (a) {
    // If email is valid
  } else {
    // If email is invalid
  }
});

Pro-tip: вместо прослушивания события keyup будет работать просто привязка к событию input. Это потому, что возможно, что значение #email будет видоизменяться без события клавиатуры, например когда пользователь вставляет электронное письмо, используя правую кнопку мыши + контекстное меню.

$('#email').on('input', function() {
  // Email validation logic here
});