Удалить класс кнопки отправки на основе действительного адреса электронной почты

Question

У меня есть кнопка отправки для страницы отказа от подписки, я хотел бы удалить «отключенный» класс для кнопки, когда пользователь вводит действительный адрес электронной почты.На данный момент у меня есть переключаемый класс на основе «ввода», какой тип работает, но я бы предпочел, чтобы пользователь ввел действительное электронное письмо для удаления «отключенного» класса.Я использую валидацию jquery для валидации. Я просто не знаю, как сделать так, чтобы класс кнопок переключался с помощью ввода jquery validate.Любые идеи?

HTML:

 <div class="form-group">
    <input type="email" class="form-control email-input input-lg" 
    name="email">
 </div>

 <button id="unsubscribe-submit"
   class="disabled">
    <span class="btn-text>Submit</span>
 </button>

jQuery:

$($emailInput).on('input', function() {
    $('#unsubscribe-submit').toggleClass('disabled', this.value.trim().length === 0);
});

jQuery Validation:

($unsubscribeForm.length) {
    $unsubscribeForm.validate({
        errorClass: 'has-error',
        errorElement: 'span',
        debug: true,
        rules: {
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            email: {
                required: 'An email address is required.',
                email: 'Please provide a valid email address.'
            }
        }
    });
}

Answer 1

Вам даже не нужен JavaScript, чтобы изменить кнопку с проверкой HTML5.Используйте входящий адрес электронной почты и установите его как обязательный.Когда она недействительна, форма недействительна, вы можете нажать кнопку, чтобы установить свой стиль

form:invalid button {
  color: red;
}

<form>
  <input type="email" required>
  <button> submit</button>
</form>

Answer 2

Поскольку вы уже используете тип ввода HTML «электронная почта», вы можете использовать встроенную в современные браузеры проверку формы.Вызов checkValidity() для элемента ввода скажет вам, считается ли его текущее значение действительным или недействительным браузером.Используйте это, чтобы удалить или добавить класс к кнопке.В этой демонстрации я также показал, как добавить / удалить атрибут disabled.Было бы предпочтительнее просто использовать класс, потому что вы все равно можете нажать кнопку, даже если у нее есть отключенный класс.

$(document.querySelector('input[type="email"]')).on('input', function() {
      // use this to add/remove a class
      $('#unsubscribe-submit')[this.value.length && this.checkValidity() ? 'removeClass' : 'addClass']('disabled');
      // or this to add/remove the disabled attribute
      $('#unsubscribe-submit').attr('disabled', this.value.length && !this.checkValidity());
    });

.disabled,
button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <input type="email" class="form-control email-input input-lg" name="email">
</div>

<button id="unsubscribe-submit" class="disabled" disabled>
    <span class="btn-text">Submit</span>
 </button>